CSS @font-face Rule
Пример
Укажите шрифт с именем "мифирстфонт" и укажите URL-адрес, по которому его можно найти:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
Подробнее примеры ниже.
Определение и использование
С @font-face правило, веб-дизайнеры не должны использовать один из "веб-безопасный" шрифты больше.
В правиле @font-face сначала необходимо определить имя шрифта (например, мифирстфонт), а затем указать файл шрифта.
Совет: Используйте строчные буквы для URL-адреса шрифта. Прописные буквы могут дать неожиданные результаты в IE!
Чтобы использовать шрифт для элемента HTML, обратитесь к имени шрифта (мифирстфонт) через свойство Font-Family:
div
{
font-family: myFirstFont;
}
Поддержка браузера
Правило @font-face поддерживается в Internet Explorer, Firefox, Opera, Chrome и Safari.
Номера в таблице определяет первую версию браузера, который полностью поддерживает формат шрифта.
| Font format | |||||
|---|---|---|---|---|---|
| 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: шрифт формат работает только тогда, когда установлено, что "устанавливаемые".
*Firefox: отключен по умолчанию, но может быть включен (нужно установить флаг "true", чтобы использовать вофф2).
Синтаксис
@font-face
{
font-properties
}
| Font descriptor | Values | Описание |
|---|---|---|
| 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-грани, содержащее дескрипторы для полужирного текста:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Файл "сансатион_болд. woff" — это другой файл шрифта, содержащий жирные символы для шрифта.
Браузеры будут использовать это всякий раз, когда фрагмент текста с семейством шрифтов "мифирстфонт" должен отображаться полужирным шрифтом.
Таким образом, вы можете иметь много @font-face правила для одного и того же шрифта.
Похожие страницы
CSS Справочник: CSS Web Fonts