CSS3 Веб шрифты
CSS Правило @font-face
Веб шрифты позволяют веб дизайнерам использовать шрифты, не установленные на компьютере пользователя.
Когда вы нашли/купили шрифт, который вы хотите использовать, просто включите шрифт файл на вашем веб сервере, и он будет автоматически загружен пользователю при необходимости.
Ваши "собственные" шрифты определены в CSS правило @font-face.
Различные форматы шрифтов
Шрифт TrueType (TTF)
TrueType - это стандарт шрифтов, разработанный в конце 1980-х годов Apple и Microsoft. TrueType является наиболее распространенным форматом шрифта как для Mac OS, так и для Microsoft операционная система Windows.
Шрифт OpenType (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.
Встроенные Шрифты OpenType (EOT)
EOT шрифты - это компактная форма шрифтов OpenType, разработанная корпорацией Майкрософт для использования как встроенные шрифты на веб страницах.
Поддержка браузером форматов шрифтов
Числа в таблице указывают первую версию браузера, которая полностью поддерживает формат шрифта.
| Формат шрифта | |||||
|---|---|---|---|---|---|
| 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 шрифта. Заглавные буквы могут дать неожиданные результаты в IE.
Чтобы использовать шрифт для элемента HTML, обратитесь к имени шрифта myFirstFont
через свойства font-family:
Пример
@font-face {
font-family: myFirstFont;
src: url(sansation_light.ttf);
}
div {
font-family: myFirstFont;
}
Попробуйте сами »
Установить полужирный текст
Необходимо добавить правило @font-face содержащее дескрипторы полужирного текста:
Пример
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.ttf);
font-weight: bold;
}
Попробуйте сами »
Файл sansation_bold.ttf - это другой файл шрифта, содержащий полужирные символы для шрифта Sansation.
Браузеры будут использовать это всякий раз, когда часть текста с семейством шрифтов myFirstFont
должна отображаться жирным шрифтом.
Таким образом, вы можете иметь больше правил @font-face для одного шрифта.
CSS3 Упражнения
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" |