@font-face
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
* Some parts of this feature may have varying levels of support.
CSS @-правило @font-face позволяет указать шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удалённого сервера, либо с компьютера пользователя. Если в правиле была объявлена функция local(), с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции url(). @font-face позволяет разрабатывать ��онтент не ограничиваясь набором "безопасных" шрифтов (шрифтов, которые настолько распространены, что считаются доступными по умолчанию). Возможность определить локально установленный шрифт позволяет более гибко настраивать шрифты не полагаясь на соединение с интернетом.Распространённым случаем является одновременное использование url() и local(), чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.Это правило может использоваться не только на верхнем уровне CSS, но и внутри любого @-правила.
@font-face {
font-family: "Open Sans";
src:
url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
Синтаксис
Descriptors
font-display-
Определяет как отображается шрифт, основываясь на том, был ли он загружен и готов ли к использованию.
font-family-
Указывает имя шрифта, которое будет использоваться для задания свойств шрифта.
font-stretch-
Значение
font-stretch. font-style-
Значение
font-style. font-weight-
Значение
font-weight. font-variant-
Значение
font-variant. font-feature-settings-
Позволяет контролировать другие расширенные особенности OpenType-шрифтов.
font-variation-settings-
Позволяет осуществлять низкоуровневый контроль над вариациями OpenType и TrueType шрифтов, указывая четырёхбуквенные названия осей для изменения вместе с их значениями.
src-
Задаёт ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удалённого файла шрифта или имя шрифта на компьютере пользователя.
Чтобы дать браузеру возможность выбрать наиболее подходящий формат шрифта, его можно указать при объявлении внутри функции
format(): src: url(ideal-sans-serif.woff) format("woff"), url(basic-sans-serif.ttf) format("opentype");Список доступных форматов:"woff","woff2","truetype","opentype","embedded-opentype", и"svg". unicode-range-
Диапазон Unicode кодов, который будет использоваться в шрифте.
MIME-типы шрифтов
| Формат | MIME-тип |
|---|---|
| TrueType | font/ttf |
| OpenType | font/otf |
| Web Open File Format | font/woff |
| Web Open File Format 2 | font/woff2 |
Примечания
-
Веб шрифты попадают под правило ограничения домена (файлы шрифтов должны находиться на том же самом домене, что и использующая их страница), если это ограничение не снимается с помощью CORS.
-
@font-faceне может быть объявлен внутри CSS-селектора. Следующий пример не будет работать:css.className { @font-face { font-family: "MyHelvetica"; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url("MgOpenModernaBold.ttf"); font-weight: bold; } }
Формальный синтаксис
@font-face =
@font-face { <declaration-list> }
Примеры
Использование загружаемого шрифта
Этот пример указывает загружаемый шрифт для использования и применяет его ко всему телу документа:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Web Font Sample</title>
<style media="screen, print">
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
}
body {
font-family: "Bitstream Vera Serif Bold", serif;
}
</style>
</head>
<body>
Это шрифт "Bitstream Vera Serif Bold" (он не поддерживает кириллические
символы).
</body>
</html>
Результат будет таким:
Использование локальных шрифтов
В этом примере используется локальный пользовательский шрифт "Helvetica Neue Bold". Если у пользователя этот шрифт не установлен (поиск происходит по полному названию шрифта и по Postscript-названию), тогда вместо него используется загружаемый шрифт "MgOpenModernaBold.ttf":
@font-face {
font-family: "MyHelvetica";
src:
local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
url("MgOpenModernaBold.ttf");
font-weight: bold;
}
Спецификации
| Specification |
|---|
| CSS Fonts Module Level 4 # font-face-rule |