Правило CSS @font-face
Пример
Укажите шрифт с именем «myFirstFont» и укажите URL-адрес, по которому его можно найти:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
По этому @font-faceправилу веб-дизайнерам больше не нужно использовать один из «веб-безопасных» шрифтов.
В @font-faceправиле необходимо сначала определить имя для шрифта (например, myFirstFont), а затем указать файл шрифта.
Чтобы использовать шрифт для элемента HTML, обратитесь к имени шрифта (myFirstFont) через свойство font-family:
div
{
font-family: myFirstFont;
}
Поддержка браузера
Правило @font-faceподдерживается в Edge, Chrome, Firefox, Safari и Opera.
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает формат шрифта.
| 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 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| SVG | Not supported | Not supported | Not supported | 3.2 | Not supported |
| EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
* Формат шрифта работает только в том случае, если он установлен как «устанавливаемый».
Синтаксис
@font-face
{
font-properties
}
| Font descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines the name of the font. |
| src | URL | Required. Defines the URL(s) where the font should be downloaded from |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default value is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default value is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default value is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of unicode characters the font supports. Default value is "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