CSS Веб-шрифты
CSS правило @font-face
Веб-шрифты позволяют веб-дизайнерам использовать шрифты, которые не установлены на компьютере пользователя.
Когда вы нашли/купили шрифт, который хотите использовать, просто подключите файл шрифта на своём веб-сервере, и он будет автоматически подгружаться пользователю при необходимости.
Ваши "собственные" шрифты определяются в CSS правиле @font-face.
Различные форматы шрифтов
TrueType Fonts (TTF)
TrueType - это стандарт шрифтов, разработанный в конце 1980-х годов компаниями Apple и Microsoft. TrueType является наиболее распространенным форматом шрифтов для операционных систем Mac OS и Microsoft Windows.
OpenType Fonts (OTF)
OpenType - это формат для масштабируемых компьютерных шрифтов. Он был построен на TrueType и является зарегистрированным товарным знаком Microsoft. Шрифты OpenType обычно используются сегодня на основных компьютерных платформах.
Web Open Font Format (WOFF)
WOFF - это формат шрифта для использования на веб-страницах. Он был разработан в 2009 году и в настоящее время является рекомендацией W3C. WOFF - это, по сути, OpenType или TrueType со сжатием и дополнительными метаданными. Цель состоит в том, чтобы поддержать распространение шрифтов с сервера на клиент по сети с ограничениями пропускной способности.
Web Open Font Format (WOFF 2.0)
TrueType/OpenType шрифт, обеспечивающий лучшее сжатие, чем WOFF 1.0.
SVG Шрифты/Формы
Шрифты SVG позволяют использовать SVG в качестве символов при отображении текста. Спецификация SVG 1.1 определяет модуль шрифта, который позволяет создавать шрифты в документе SVG. Вы также можете применять CSS к документам SVG, а правило @font-face можно применять к тексту в документах SVG.
Embedded 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 | Нет | 36.0 | 35.0* | Нет | 26.0 |
| SVG | Нет | 4.0 | Нет | 3.2 | 9.0 |
| EOT | 6.0 | Нет | Нет | Нет | Нет |
*IE: Формат шрифта работает только в том случае, если он установлен как "устанавливаемый".
*Firefox: По умолчанию не поддерживается, но может быть включен (необходимо установить флажок "true" чтобы использовать WOFF2).
Как использовать нужный шрифт?
В правиле @font-face сначала определите имя для шрифта (например, myFirstFont), а затем укажите на файл шрифта.
Совет: Всегда используйте буквы в нижнем регистре для указания URL-адреса шрифта. Буквы в верхнем регистре могут дать неожиданные результаты в Internet Explorer.
Чтобы использовать шрифт для элемента 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:
| Дескриптор | Значения | Описание |
|---|---|---|
| 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" |
