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 |
Совместимость с браузерами
Loading…