Веб-шрифты CSS
- Предыдущая страница Эффекты текста CSS
- Следующая страница CSS 2D преобразования
Правило 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". |
font-style |
|
Опционально. Определяет стиль шрифта. Значение по умолчанию: "normal". |
font-weight |
|
Опционально. Определяет толщину шрифта. Значение по умолчанию: "normal". |
unicode-range | unicode-range | Опционально. Определяет диапазон поддерживаемых Unicode-символов шрифта. Значение по умолчанию: "U+0-10FFFF". |
- Предыдущая страница Эффекты текста CSS
- Следующая страница CSS 2D преобразования