font-display

Властивість font-display визначає як font face відображаєтся стосовно як він завантижився і готовий до використання.

Хронологія відображення шрифта

Хронологія відображення шрифта залежить від часу на початку завантаження шрифта та його використання. Типи хронології поділені на три частини які вказують поведінку відображення усих елементів які використовують цей шрифт.

Блокування шрифту(block)
Якщо шрифт не завантажений, усі елементи які очікують на його використання мають відображатись невидимими(invisible). Якщо шрифт успішно завантажений за цей період, вони відображаются за замовчуванням.
Заміна шрифту(swap)
Якщо шрифт не завантажений, усі елементи що очікують на його використання , мають використати запасний шрифт. Якщо шрифт успішно завантажений за цей період, вони відображаются за замовчуванням.
Невдача(failure)
Якщо шрифт не був завантажений, клієнт відображає його як невдачно завантажений, що викликає звичайне резервування шрифту.
Related at-rule@font-face
Initial valueauto
Mediavisual
Computed valueas specified
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Синтаксис

/* Keyword values */
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

Значення

auto
Відображення шрифту виконуєтся автоматично клієнтом.
block
Надає елементам короткий період блокування і нескінченний swap період.
swap
Надає надзвичайно малий період блокування і нескінченний період підміни шрифту.
fallback
Надає надзвичайно малий період блокування і малий період підміни шрифту.
optional
Надає надзвичайно малий період блокування без підміни шрифту.

Формальний синтаксис

[ auto | block | swap | fallback | optional ]

Приклад

@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format('woff'),
       url(/path/to/fonts/examplefont.eot) format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

Специфікації

Specification Status Comment
CSS Fonts Module Level 4
The definition of 'font-display' in that specification.
Working Draft Initial definition

Сумісність з браузерами

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
font-displayChrome Full support 72Edge No support NoFirefox Full support 58IE No support NoOpera Full support 60Safari Full support 11.1WebView Android Full support 72Chrome Android Full support 72Firefox Android Full support 58Opera Android Full support 51Safari iOS Full support 11.1Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support