CSS Web Fonts
Правило @font-грани CSS
Веб-шрифты позволяют веб-дизайнерам использовать шрифты, которые не установлены на компьютере пользователя.
Когда вы нашли/купили шрифт, который вы хотите использовать, просто включите файл шрифта на вашем веб-сервере, и он будет автоматически загружаться пользователю при необходимости.
Ваши "собственные" шрифты определяются в правиле CSS @font-face.
Различные форматы шрифтов
Шрифты 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-грани может применяться к тексту в документах SVG.
Встроенные шрифты OpenType (СРВ)
СРВ шрифты — это компактная форма шрифтов OpenType, разработанная корпорацией Майкрософт для использования в качестве встроенных шрифтов на веб-страницах.
Поддержка браузеров для форматов шрифтов
Номера в таблице определяет первую версию браузера, который полностью поддерживает формат шрифта.
| 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 | Не поддерживается | 36.0 | 35.0* | Не поддерживается | 26.0 |
| SVG | Не поддерживается | 4.0 | Не поддерживается | 3.2 | 9.0 |
| EOT | 6.0 | Не поддерживается | Не поддерживается | Не поддерживается | Не поддерживается |
* IE: шрифт формат работает только тогда, когда установлено, чтобы быть "устанавливаемый".
* Firefox: не поддерживается по умолчанию, но может быть включен (нужно установить флаг "true", чтобы использовать вофф2).
Использование шрифта, который вы хотите
В правиле @font-face ; сначала определите имя шрифта (например, мифирстфонт), а затем наведите указатель на файл шрифта.
Совет: Всегда используйте строчные буквы для URL-адреса шрифта. Прописные буквы могут давать неожиданные результаты в IE.
Чтобы использовать шрифт для элемента HTML, обратитесь к имени шрифта (мифирстфонт) через свойство 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" — это другой файл шрифта, содержащий жирные символы для шрифта.
Браузеры будут использовать это всякий раз, когда фрагмент текста с семейством шрифтов "мифирстфонт" должен отображаться полужирным шрифтом.
Таким образом, вы можете иметь много @font-face правил для одного и того же шрифта.
Дескрипторы шрифтов CSS
В следующей таблице перечислены все дескрипторы шрифтов, которые могут быть определены внутри правила @font-face:
| Дескриптор | Значения | Описание |
|---|---|---|
| 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 | Дополнительные. Определяет диапазон символов Юникода, поддерживаемых шрифтом. По умолчанию "U + 0-10ffff" |