|
CSS3 Правило @font-face
 Полный CSS Справочник
Пример
Указать шрифт под названием "myFirstFont" и указать адрес URL, где он может быть найден:
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE */
} |
Попробуйте сами » |
Поддержка Браузерами
Правило @font-face поддерживается всеми основными браузерами.
Internet Explorer поддерживает только типы шрифтов .eot.
Firefox, Chrome, Safari и Opera поддерживают типы шрифтов .ttf и .otf.
Определение и ИспользованиеБлагодаря правилу @font-face, веб дизайнеры более не обязаны использовать один из
"безопасных веб шрифтов".
Создайте правило font-face, присвоив имя шрифту:
- font-family: myFirstFont;
Добавьте файл шрифта где-нибудь на вашем сервере и укажите ссылку на него в CSS:
- src: url('Sansation_Light.ttf')
Если файл расположен в другой директории, используйте соответствующий относительный (или полный) адрес URL:
- src: url('../css3/Sansation_Light.ttf').
Теперь шрифт готов к использованию, ниже приведен пример, как его использовать для
всех элементов div:
div
{
font-family: myFirstFont;
} |
Синтаксис
@font-face
{
свойства-шрифта
} |
| Свойство |
Значения |
Описание |
| font-family |
название |
Обязательный параметр. Определяет название шрифта. |
| 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-диапазон |
Не обязательный параметр. Определяет диапазон символов unicode, которые поддерживает шрифт.
Значение по умолчанию равно "U+0-10FFFF" |
Смотрите ТакжеCSS3 уроки: CSS3 Шрифты
Полный CSS Справочник
|
