font-display
Дескриптор `@font-face` (не обычное свойство): определяет, как выглядит текст, пока веб-шрифт ещё загружается.
Синтаксис
@font-face { font-display: swap; }Значения
| Параметр | Тип | Описание |
|---|---|---|
| swap | keyword | Сразу показать текст запасным шрифтом и подменить на веб-шрифт, когда он придёт. |
| optional | keyword | Взять веб-шрифт, только если он загрузился почти мгновенно, иначе оставить запасной на это посещение. |
| fallback | keyword | Середина: очень короткая невидимость, потом запасной шрифт; опоздавший шрифт ещё может подмениться в течение пары секунд. |
| block | keyword | Прятать текст до ~3 секунд, ожидая шрифт. |
| auto | keyword | По умолчанию: решает браузер, обычно как `block`. |
Примеры
Фирменный шрифт, который никогда не прячет текст:
<style>
@font-face {
font-family: "Brand";
src: local("Georgia"), local("Times New Roman");
font-display: swap;
}
h2 { font-family: "Brand", serif; }
</style>
<h2>The heading is readable immediately</h2>Примечания
font-display работает только внутри @font-face; в обычном селекторе его игнорируют. swap — обычный выбор для шрифтов текста и заголовков; optional даёт самую стабильную вёрстку и подходит для декоративных шрифтов. В Google Fonts он добавляется параметром &display=swap в адресе стилей.
См. также
- @font-face — Подключает шрифт и даёт ему имя для использования в `font-family`.
- font-family — Семейство шрифта со списком запасных вариантов.
- <link> — Подключает к странице внешний ресурс: файл стилей, иконку сайта, шрифт.
Вопросы и ответы по теме
В учебнике
- Веб-шрифты — Как подключить свой шрифт — правило @font-face, формат woff2, font-display, вариативные шрифты, Google Fonts с preconnect, запасные шрифты и выбор между своим сервером и CDN.