Веб-шрифты CSS

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

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

После того как вы найдете/купите шрифт, который хотите использовать, просто включите файл шрифта в ваш веб-сервер, и он автоматически загрузится пользователю при необходимости.

Ваш шрифт “собственного производства” в CSS @font-face определены в правилах.

Разные форматы шрифтов

Шрифты TrueType (TTF)

TrueType — это стандарт шрифтов, разработанный Apple и Microsoft в конце 1980-х годов. TrueType — это наиболее используемый формат шрифтов в операционных системах Mac OS и Microsoft Windows.

Шрифты OpenType (OTF)

OpenType — это формат масштабируемого компьютерного шрифта. Он основан на TrueType и является зарегистрированным товарным знаком Microsoft. Сегодня шрифты OpenType получили широкое распространение на основных компьютерных платформах.

Формат открытых веб-шрифтов (WOFF)

WOFF — это формат шрифтов для веб-страниц. Он был разработан в 2009 году и теперь является рекомендованным стандартом W3C. WOFF по сути является сжатым и содержащим метаданные форматом OpenType или TrueType. Целью является поддержка分发 шрифтов от сервера к клиенту в сетях с ограниченной полосой пропускания.

Формат открытых веб-шрифтов (WOFF 2.0)

TrueType/OpenType шрифты обеспечивают лучшее сжатие, чем WOFF 1.0.

SVG шрифты/формы

SVG шрифты позволяют использовать SVG в качестве шрифтовых glyphs при отображении текста. Спецификация SVG 1.1 определяет модуль шрифта, который позволяет создавать шрифты в документах SVG. Вы также можете применить CSS к документам SVG, и правило @font-face может применяться к тексту в документах SVG.

Вградимые OpenType шрифты (EOT)

EOT шрифт - это компактная форма OpenType шрифта, разработанная Microsoft, используемая в качестве嵌入式 шрифта на веб-страницах.

поддержка браузерами формата шрифта

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

формат шрифта
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 не поддерживается не поддерживается не поддерживается не поддерживается

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

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

использование нужного шрифта

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

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

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

пример

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

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

использование жирного текста

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

пример

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

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

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

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

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

CSS шрифтовых описателей

в таблице перечислены возможности @font-face все шрифтовые описатели (font descriptor), определенные в правилах:

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