Укажите шрифт с именем "myFirstFont" и укажите URL-адрес, по которому его можно найти:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
Попробуйте сами »
Определение @font-face
Благодаря CSS правилу @font-face веб-дизайнерам больше не нужно использовать один из "веб-безопасных" шрифтов.
CSS свойство в правиле @font-face вы должны сначала определить имя шрифта (например, myFirstFont), а затем указать на файл шрифта.
Чтобы использовать шрифт для элемента HTML, обратитесь к названию шрифта (myFirstFont) через свойства font-family:
div
{
font-family: myFirstFont;
}
Поддержка @font-face
CSS правило @font-face поддерживается в Edge, Chrome, Firefox, Safari и Opera.
Цифры в таблице относятся к первой версии браузера, которая полностью поддерживает формат шрифта.
| Формат | |||||
|---|---|---|---|---|---|
| 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 | Не поддерживается | Не поддерживается | Не поддерживается | Не поддерживается |
*Формат шрифта работает только в том случае, если задано значение "installable".
Синтаксис @font-face
@font-face
{
font-properties
}
| Описание шрифта | Значение | Описание |
|---|---|---|
| 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-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Попробуйте сами »
Файл "sansation_bold.woff" - это другой файл шрифта, который содержит жирные символы шрифта Sansation.
Браузеры будут использовать это всякий раз, когда фрагмент текста с семейством шрифтов "myFirstFont" должен отображаться жирным шрифтом.
Таким образом, вы можете использовать множество правил @font-face для одного и того же шрифта.
Страницы по теме @font-face
CSS Учебник: CSS Веб шрифты