СSS Свойство СSS3 Правило @font-face
Пример
Указать шрифт с именем "myFirstFont", и укажите URL, где его можно найти:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
Редактор кода »
Определение и использование
С @font-face правило, веб-дизайнеры больше не должны использовать один из "web-safe" шрифтов.
В правило @font-face вы должны сначала определить имя шрифта (например, myFirstFont), а затем указать на файл шрифта.
Совет: Используйте строчные буквы для URL шрифта. Прописные буквы могут дать неожиданные результаты в IE!
Чтобы использовать шрифт для элемента HTML, обратитесь к имени шрифта (myFirstFont) через свойство font-family:
div
{
font-family: myFirstFont;
}
Поддержка браузеров
Правило @font-face поддерживается в Internet Explorer, Firefox, Opera, Chrome и Safari.
Числа в таблице указывает первую версию браузера, которая полностью поддерживает формат шрифта.
| Формат шрифта | |||||
|---|---|---|---|---|---|
| TTF/OTF | 4.0 | 9.0* | 3.5 | 3.1 | 10.0 |
| WOFF | 5.0 | 9.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 36.0 | Не поддерживаемый | 35.0* | Не поддерживаемый | 26.0 |
| SVG | 4.0 | Не поддерживаемый | Не поддерживаемый | 3.2 | 9.0 |
| EOT | Не поддерживаемый | 6.0 | Не поддерживаемый | Не поддерживаемый | Не поддерживаемый |
*Edge и IE: Формат шрифта работает только тогда, когда установлен как "installable"
*Firefox: отключен по умолчанию, но может быть включен (нужно установить флаг "true", чтобы использовать WOFF2).
CSS Синтаксис
@font-face
{
font-properties
}
| Дескриптор шрифта | Значениеs | Описание |
|---|---|---|
| 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" |
Примеры
Пример
Необходимо добавить еще одно правило @font-face, содержащее дескрипторы для полужирного текста:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Редактор кода »
Файл "sansation_bold.woff" это еще один файл шрифта, который содержит полужирные символы для шрифта Sansation.
Браузеры будут использовать это всякий раз, когда кусок текста с семейством шрифтов "myFirstFont" должен отображаться как полужирный.
Таким образом, вы можете иметь много правил @font-face для одного и того же шрифта.
Связанные страницы
CSS Учебник: CSS Веб шрифты
