Правило CSS @font-face

  • Предыдущая страница font
  • Следующая страница font-family

Определение и использование

Используя правило @font-face, веб-дизайнеры больше не должны использовать какие-либо "безопасные" шрифты.

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

Совет:URL шрифта использует строчные буквы. Буквы с заглавной буквы могут привести к неожиданным результатам в IE!

Чтобы использовать шрифт в HTML-элементе, укажите имя шрифта через атрибут font-family (myFirstFont):

div {
  font-family: myFirstFont;
}

См. также:

Урок CSS:Веб-шрифты в CSS

Пример

Определите шрифт с именем "myFirstFont" и укажите URL, по которому можно найти его:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

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

Более подробные примеры TIY можно найти внизу страницы.

Грамматика CSS

@font-face {
  font-properties
}
Пропись шрифта Значение Описание
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".

Более примеров

Пример

Вы должны добавить еще одно правило @font-face, которое содержит описатель жирного текста:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

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

Файл "sansation_bold.woff" - это еще один файл шрифта, который содержит жирные символы шрифта Sansation.

Когда текст, в котором нужно представить одну строку с фонтовой семьей "myFirstFont", должен быть粗ым, браузер использует его.

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

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

Internet Explorer, Firefox, Opera, Chrome и Safari поддерживают правило @font-face.

Числа в таблице указывают на первую версию браузера, которая поддерживает полный формат шрифта.

Формат шрифта
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 14.0 36.0 39.0 10.0 26.0
SVG Не поддерживается Не поддерживается Не поддерживается 3.2 Не поддерживается
EOT 6.0 Не поддерживается Не поддерживается Не поддерживается Не поддерживается

* Edge и IE: формат шрифта действует только при установке в "installable".

* Firefox: по умолчанию отключен, но может быть включен (необходимо установить флаг в "true", чтобы использовать WOFF2).

  • Предыдущая страница font
  • Следующая страница font-family