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

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

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

Используя правило @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).

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