This page was translated from English by the community.Learn more and join the MDN Web Docs community.
font-display
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since январь 2020 г..
Описание
Дескрипторfont-display определяет то, как шрифт, подключённый через font face будет отображаться в зависимости от того, загрузился ли он и готов ли к использованию.
Временная шкала отображения шрифтов
Временная шкала отображения шрифтов основывается на таймере, который запускается в момент, когда пользовательский агент начинает попытки по применению загруженного шрифта. Эта временная шкала разделена на три отрезка, приведённых ниже, которые диктуют поведение рендеринга любых элементов с использованием шрифта.
- Период блокировки шрифта (Font block period)
Если шрифт не загружен, любой элемент, который пытается его использовать, должен быть отрендерен с невидимым запасным шрифтом. Если за это время шрифт успешно загружается, то он используется, как обычно.
- Период подмены шрифта (Font swap period)
Если шрифт не загружен, любой элемент, который пытается его использовать, должен быть отрендерен запасным шрифтом. Если за это время шрифт успешно загружается, то он используется, как обычно.
- Период отказа шрифта (Font failure period)
Если шрифт не загружен, пользовательский агент воспринимает это как неудачную загрузку и использует запасной шрифт.
| Связано с@-правила | @font-face |
|---|---|
| Начальное значение | auto |
| Обработка значения | как указано |
Синтаксис
/* Ключевые слова */font-display: auto;font-display: block;font-display: swap;font-display: fallback;font-display: optional;Значения
- auto
Стратегию загрузки шрифта определяет пользовательский агент.
- block
Для шрифта задаётся короткий период блокировки и бесконечный период подмены.
- swap
Для шрифта не задаётся период блокировки и задаётся бесконечный период подмены.
- fallback
Для шрифта задаётся очень короткий период блокировки и короткий период подмены.
- optional
Для шрифта задаётся очень короткий период блокировки и не задаётся период подмены.
Официальный синтаксис
font-display =
auto|
block|
swap|
fallback|
optional
Примеры
@font-face { font-family: ExampleFont; src: url("/path/to/fonts/example-font.woff") format("woff"), url("/path/to/fonts/example-font.eot") format("embedded-opentype"); font-weight: 400; font-style: normal; font-display: fallback;}Спецификации
| Specification |
|---|
| CSS Fonts Module Level 4 # font-display-desc |