CSS праило @font-face

❮ Назад Вперед ❯

CSS правило @font-face дает возможность веб-дизайнерам добавлять онлайн шрифты для отображения текста на веб-страницах. Таким образом, веб-дизайнеры больше не будут ограничены использованием "безопасных веб-шрифтов".

Прежде всего нужно добавить название для шрифта (подобно myFirstFont) в новом правиле @font-face, а дальше указать файл шрифтов.

Каждый браузер имеет свой формат. Мы используем форматы ttf, otf, eot, svg, woff.

OTF / TTF

Формат WOFF был создан как сжатая версия шрифтов OpenType и TrueType, так как эти форматы могут легко быть скопированы. Но OpenType имеет много возможностей, которые могут понадобиться веб-дизайнерам (например, лигатура и др.).

EOT

Embedded Open Type. Этот формат был создан разработчиками Microsoft (создатель @font-face) 15 лет назад. Это единственный формат, который поддерживается при использовании @font-face в версии IE8 и ниже.

SVG

Scalable Vector Graphics (Font). SVG - это векторное создание шрифта, которое имеет меньший размер шрифта, а также отлично подходит для мобильного использования. Это единственный формат, поддерживаемый версией 4.1 и ниже в Safari для iPhone.

WOFF

Web Open Font Format. Созданные разработчиками Mozilla совместно с другими и предназначенные для веб-использования, WOFF шрифты обычно загружаются быстрее других форматов, так как они используют сжатую версию структуры шрифтов OpenType (OTF) и TrueType (TTF).

Значение по умолчанию	Зависит от браузера.
Применяется	Ко всем элемента, а также к ::first-letter и ::first-line
Наследуется	Да
Анимируемое	Нет
Версия	CSS3
DOM синтаксис	object.style.fontFamily = "Verdana,sans-serif";

Синтаксис

@font-face {
font-properties
}

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      @font-face {
      font-family: 'myFont';
      src: url('webfont.eot'); /* IE9 Compat Modes */
      src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
      url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
      url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
      url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
      }
      div {
      font-family: myFont,sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>Пример @font-face</h2>
    <div>
      CSS правило @font-face at-rule определяет, с каким шрифтом отобразить текст. Шрифт может быть загружен с удаленного сервера или с локально установленного шрифта на компьютере пользователя. Если задана функция local(), указывающее какое название шрифта искать на пользовательском компьютере, и если пользовательский агент находит соответствие, то используется именно этот шрифт. В противном случае, будет загружен и использован ресурс шрифта, указанный в функции url()..
    </div>
    <p>
      Правило @font-face может быть использовано не только на верхнем уровне CSS, но и внутри любого CSS правила conditional-group.
    </p>
  </body>
</html>

Попробуйте сами!

Значения

Описание шрифта	Значение	Описание
font-family	name	Устанавливает название шрифта. Необходимое значение.
src	URL	Устанавливает URL откуда должен быть загружен шрифт. Необходимое значение.
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Определяет, каким образом шрифт должен быть растянут. Значение по умолчанию - normal. Дополнительное значение.
font-style	normal italic oblique	Устанавливает стиль шрифта. Значение по умолчанию - normal. Дополнительное значение.
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Устанавливает жирность шрифта. Значение по умолчанию - normal. Дополнительное значение.
unicode-range	unicode-range	Определяет диапазон символов unicode, поддерживаемые шрифтом. Значение по умолчанию - U+0-10FFFF. Дополнительное значение.