Вы здесь

CSS свойство @font-face

Благодаря правилу @font-face веб-дизайнеры больше не ограничены набором "веб-безопасных" шрифтов. Правило @font-face позволяет определить настройки шрифтов, а также загрузить специфичный шрифт на компьютер пользователя.

При описании шрифта в правиле @font-face сначала необходимо определить имя шрифта (например, myFirstFont), а затем указать на файл шрифта.

Совет: В URL следует использовать только буквы в нижнем регистре, написание в верхнем регистре может привести к непредсказуемым результатам в IE!

Чтобы затем применить, определенный при помощи правила @font-face, шрифт с HTML элементом, нужно имя шрифта (myFirstFont) указать через свойство font-family:


div {
     font-family: myFirstFont;
 }

CSS синтаксис

@font-face { свойства шрифта }

Возможные значения

Дескриптор шрифта Значение Описание
font-family имя Обязательный параметр. Определяет имя шрифта.
src url(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 диапазон юникода Необязательный параметр. Определяет диапазон символов юникода, поддерживаемых шрифтом. Значение по умолчанию "U+0-10FFFF".

Пример

Определяем шрифт с именем "myFirstFont" и URL, где его можно найти


@font-face {
     font-family: myFirstFont;
     src: url(sansation_light.woff);
}