Веб-шрифты CSS
Правило CSS @font-face
Веб-шрифты позволяют веб-дизайнерам использовать шрифты, которые не установлены на компьютере пользователя.
Когда вы нашли/купили шрифт, который хотите использовать, просто включите файл шрифта на свой веб-сервер, и он будет автоматически загружен пользователю при необходимости.
Ваши «собственные» шрифты определяются в @font-faceправиле CSS.
Различные форматы шрифтов
Шрифты TrueType (TTF)
TrueType — это стандарт шрифтов, разработанный в конце 1980-х годов компаниями Apple и Microsoft. 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 в качестве глифов при отображении текста. Спецификация SVG 1.1 определяет модуль шрифта, который позволяет создавать шрифты в документе SVG. Вы также можете применить CSS к документам SVG, а правило @font-face можно применить к тексту в документах SVG.
Встроенные шрифты OpenType (EOT)
Шрифты EOT — это компактная форма шрифтов OpenType, разработанная Microsoft для использования в качестве встроенных шрифтов на веб-страницах.
Браузерная поддержка форматов шрифтов
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает формат шрифта.
| Font format | |||||
|---|---|---|---|---|---|
| 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 | Not supported | Not supported | Not supported | 3.2 | Not supported |
| EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
*IE: формат шрифта работает только в том случае, если он установлен как «устанавливаемый».
Использование шрифта, который вы хотите
В @font-faceправиле; сначала определите имя для шрифта (например, myFirstFont), а затем укажите файл шрифта.
Совет. Всегда используйте строчные буквы для URL-адреса шрифта. Прописные буквы могут привести к неожиданным результатам в IE.
Чтобы использовать шрифт для элемента HTML, обратитесь к имени шрифта (myFirstFont) через font-familyсвойство:
Пример
@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.
Браузеры будут использовать это всякий раз, когда фрагмент текста с семейством шрифтов «myFirstFont» должен отображаться жирным шрифтом.
Таким образом, вы можете иметь много @font-faceправил для одного и того же шрифта.
Дескрипторы шрифтов CSS
В следующей таблице перечислены все дескрипторы шрифтов, которые могут быть определены внутри @font-faceправила:
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |