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

Синтаксис

Синтаксически правило задается по следующему шаблону:

@font-face: font-description

Правило @font-face может содержать одно или несколько объявлений свойств, как в обычном CSS, которые называются дескрипторами шрифта. О шрифтах подробнее в Руководстве по CSS Fonts.

Общая форма правила @font-face:

@font-face { font-family: fontname; src: url(fontfile path); }

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

Примеры написания кода правила @font-face:

@font-face {
    font-family: "OpenSans";
    src: url("../fonts/OpenSans-Regular.eot");
    src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
}
body {
    font-family: "OpenSans", Arial, sans-serif;
    font-size: 1.2em;
}

Используя правило @font-face, вам не нужно зависеть от ограниченного количества шрифтов, которые пользователи установили на свои компьютеры.

Также можно установить выбор конкретного шрифта, когда для него установлена определенная характеристика, например bold или italic.

@font-face {
    font-family: "OpenSans";
    src: url("../fonts/OpenSans-Regular.eot");
    src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "OpenSansBold";
    src: url("../fonts/OpenSans-Bold.eot");
    src: url("../fonts/OpenSans-Bold.ttf") format("truetype");
}
h1 {
    font-family: "OpenSansBold", Arial, sans-serif;    /* Specify the OpenSans bold font */
}
p {
    font-family: "OpenSans", Arial, sans-serif;
}

Параметры

Параметры имеют следующие значения:

Параметр Описание
Опязательно — должны быть указаны следующие параметры
font-family Определяет имя шрифта, которое будет использоваться в качестве значения font-family для свойств шрифта.
src Указывает расположение файла шрифта для использования.
Опционально — следующие параметры не обязательны
font-style Допустимое значение свойства font-style.
font-weight Допустимое значение свойства font-weight (за исключением относительных значений bolder и lighter).

Поддержка браузеров

Правило @font-face поддерживается во всех основных браузерах.

Поддержка определенных форматов шрифтов значительно различается в разных браузерах. Internet Explorer поддерживает шрифты типа .eot и .wof, а Firefox, Chrome, Safari и Opera поддерживают шрифты типа .woff, .ttf и .otf.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.