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имяОбязательный параметр. Определяет имя шрифта.
srcurl(URL)Обязательный параметр. Определяет URL(ы), откуда шрифт можно загрузить.
font-stretchnormal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded		Необязательный параметр. Определяет начертание шрифта для его уплотнения или расширения. Значение по умолчанию normal.
font-stylenormal
italic
oblique		Необязательный параметр. Определяет стиль шрифта. Значение по умолчанию normal.
font-weightnormal
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);
}