Propriété CSS font-display

Le descripteur font-display définit comment les fichiers de police sont téléchargés et affichés par le navigateur. Ce descripteur prend les valeurs suivantes :

• auto
• block
• swap
• fallback
• optional

La typographie était autrefois limitée aux polices locales, où seules les polices dites « web-safe » étaient disponibles. Puis est arrivée la règle @font-face permettant de télécharger des fichiers de police sur un serveur et de définir un ensemble de règles nommant la police et indiquant au navigateur où télécharger les fichiers. Cela a donné naissance à des services permettant d'utiliser des polices personnalisées. Cependant, ces fichiers de police personnalisés peuvent être volumineux et augmenter le temps de chargement de la page.

Une autre préoccupation était liée au FOUT (« flash de texte non stylé »). Les navigateurs affichaient une police système pendant le téléchargement de la police personnalisée. Cela inquiétait les concepteurs web, qui y voyaient une perturbation de l'expérience utilisateur. Aujourd'hui, les navigateurs masquent généralement le texte jusqu'au téléchargement de la police personnalisée, un phénomène appelé FOIT (« flash de texte invisible »).

Aucune des méthodes mentionnées ci-dessus n'est idéale. À la place, le descripteur font-display indique désormais au navigateur notre préférence : FOUT ou FOIT.

Valeur initiale	auto
S'applique à	Règle @font-face.
Hérité	Non.
Animable	Non.
Version	CSS Fonts Module Level 4
Syntaxe DOM	object.style.fontDisplay = "swap";

Syntaxe

Syntaxe du descripteur CSS font-display

font-display: auto | block | swap | fallback | optional | initial | inherit;

Comment utiliser la règle @font-face ?

@font-face {
  font-family: 'MyWebFont';
  /* Define the custom font name */
  src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff');
  /* Define where the font can be downloaded */
  font-display: optional;
}

Valeurs

Valeur	Description
auto	L'affichage de la police est défini par le navigateur.
block	Spécifie une période de blocage courte et une période d'échange infinie.
swap	Attribue à la police une période de blocage très courte et une période d'échange infinie.
fallback	Attribue à la police une période de blocage très courte et une période d'échange courte.
optional	Attribue à la police une période de blocage très courte et aucune période d'échange.
initial	Fait utiliser à la propriété sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Pratique

Quelles sont les valeurs possibles pour la propriété CSS 'font-display' ?

blockautoswapfallbackoptionalnone