Переклад не закінчено. Будь ласка, допоможіть перекласти цю статтю з англійської.

Властивість 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 AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
font-displayChrome Full support 60Edge No support NoFirefox Full support 58IE No support NoOpera Full support 47Safari Full support YesWebView Android Full support 60Chrome Android Full support 60Edge Mobile No support NoFirefox Android Full support 58Opera Android Full support 44Safari iOS Full support YesSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support

Мітки документа й учасники

Зробили внесок у цю сторінку: cloudgnome
Востаннє оновлена: cloudgnome,