пример
Укажите шрифт с именем "myFirstFont" , а также указать адрес , по которому его можно найти:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
} Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
С @ шрифт лицом правило, веб - дизайнеры не делать больше не придется использовать один из "web-safe" - "web-safe" шрифтов.
В новом @ шрифт лицом правило необходимо сначала определить имя шрифта (eg myFirstFont) , (eg myFirstFont) , а затем указать на файл шрифта.
Совет: Используйте прописные буквы для URL шрифта. Прописные буквы могут дать неожиданные результаты в IE!
Чтобы использовать шрифт для HTML - элемента, ссылаться на имя шрифта (myFirstFont) через семейство шрифтов собственности:
div
{
font-family: myFirstFont;
}Поддержка браузеров
@ Шрифта лицо правило поддерживается в Internet Explorer, Firefox, Opera, Chrome, и Safari.
Числа в таблице определяет первую версию браузера, которая полностью поддерживает формат шрифта.
| формат шрифта | |||||
|---|---|---|---|---|---|
| TTF / OTF | 4.0 | 9.0 * | 3.5 | 3.1 | 10,0 |
| Уофф | 5.0 | 9.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 36,0 | Не поддерживается | 35,0 * | Не поддерживается | 26,0 |
| SVG | 4.0 | Не поддерживается | Не поддерживается | 3.2 | 9.0 |
| СРВ | Не поддерживается | 6.0 | Не поддерживается | Не поддерживается | Не поддерживается |
* Пограничный и IE: Формат шрифта работает только тогда , когда установлен быть "installable" .
* Firefox: по умолчанию отключена, но может быть включена (необходимо установить флаг "true" , чтобы использовать WOFF2).
Синтаксис
@font-face
{
font-properties
}| дескриптор шрифта | Значения | Описание |
|---|---|---|
| семейство шрифтов | name | Необходимые. Определяет имя шрифта. |
| ЦСИ | URL | Необходимые. Определяет URL(s) , где шрифт должен быть загружен из |
| шрифт-стрейч | нормальный сгущенный ультра-конденсированной экстра-конденсируется полуприцеп конденсируется расширенный полу вспененные дополнительные вспененные ультра вспененные | Необязательный. Определяет, как должен быть растянут шрифт. Значение по умолчанию является "normal" |
| стиль шрифта | нормальный курсивный косой | Необязательный. Определяет, как должно быть в стиле шрифта. Значение по умолчанию является "normal" |
| начертание шрифта | нормальный жирный 100 200 300 400 500 600 700 800 900 | Необязательный. Определяет дерзновение шрифта. Значение по умолчанию является "normal" |
| юникода-диапазон | unicode-range | Необязательный. Определяет диапазон символов Юникода поддерживает шрифт. Значение по умолчанию "U+0-10FFFF" |
Попробуйте сами - Примеры
пример
Вы должны добавить еще один @ правило шрифта для лица, содержащий дескрипторы для жирного текста:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Попробуй сам " Файл "sansation_bold.woff" еще один файл шрифта, который содержит символы для смелых шрифта Sansation.
Браузеры будут использовать это всякий раз , когда фрагмент текста с семейства шрифтов "myFirstFont" должны оказывать как полужирный.
Таким образом, вы можете иметь много правил @ шрифт лицу для того же шрифта.
Похожие страницы
CSS3 учебник: CSS3 шрифты