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. Дополнительное значение.

Поддержка браузера

chrome edge firefox safari opera
4.0+ 12.0+ 3.5+ 3.2+ 10.0+

Практикуйте свои знания

Что вы можете указать в правиле @font-face CSS?
Считаете ли это полезным?