font-display

Le descripteur font-display détermine la façon dont une fonte est affichée selon qu'elle ait été chargée et prête à être utiliser.

Le déroulement de l'affichage d'une police

La gestion d'une fonte de caractères s'effectue selon trois périodes distinctes dont la première commence lorsque l'agent utilisateur tente de télécharger une fonte.

Période 1 : Blocage des fontes: Si la fonte n'est pas chargée, tout élément utilisant cette fonte doit être rendu avec une fonte alternative invisible. Si la fonte est chargée correctement pendant cette période, elle est utilisée normalement.
Période 2 : Échange des fontes: Si la fonte n'est pas chargée, tout élément utilisant cette fonte doit utiliser une fonte alternative visible. Si la fonte est chargée correctement pendant cette période, elle est utilisée normalement.
Période 3 : Échec du chargement des fontes: Si la fonte n'est pas chargée, l'agent utilisateur considère qu'il y a eu un échec du chargement et utilise la fonte alternative disponible.

En lien avec les règles @	`@font-face`
Valeur initiale	auto
Média	visuel
Valeur calculée	comme spécifié
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Valeeurs avec un mot-clé */
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

Valeurs

auto: La stratégie d'affichage de la fonte est définie par l'agent utilisateur.
block: La période de blocage est courte et est suivi d'une période d'échange infinie.
swap: Il n'y a pas de période de blocage et la période d'échange est infinie.
fallback: La période de blocage est extrêmement courte et est suivie par une courte période d'échange.
optional: La période de blocage est extrêmement courte et il n'y a pas de période d'échange.

Syntaxe formelle

[ auto | block | swap | fallback | optional ]

Exemples

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

Spécifications

Spécification	État	Commentaires
CSS Font Rendering Controls Module Level 1 La définition de 'font-display' dans cette spécification.	Brouillon de l'éditeur	Définition initiale.

Fonctionnalité	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Support simple	51.0^[1]	?bug 1157064	?	?	?

Fonctionnalité	Android	Webview Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile	Chrome pour Android
Support simple	Pas de support	?	?bug 1157064	?	?	?	Pas de support

[1] Via une préférence.