font-display
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.
Le descripteur CSS font-display pour la règle @ @font-face détermine comment une police est affichée en fonction de son état de téléchargement et de disponibilité.
Syntaxe
/* Valeurs 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-
La période de blocage est extrêmement courte et est suivie par une période d'échange 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.
Note :
Dans Firefox, les préférences gfx.downloadable_fonts.fallback_delay et gfx.downloadable_fonts.fallback_delay_short fournissent la durée des périodes « courte » et « extrêmement courte », respectivement.
Description
La chronologie d'affichage de la police est basée sur un minuteur qui commence au moment où l'agent utilisateur tente d'utiliser une police donnée téléchargée. La chronologie est divisée en trois périodes qui dictent le comportement de rendu de tous les éléments utilisant la police :
- Période de blocage de la police : Si la police n'est pas chargée, tout élément tentant de l'utiliser doit rendre une police de repli invisible. Si la police se charge avec succès pendant cette période, elle est utilisée normalement.
- Période d'échange de la police : Si la police n'est pas chargée, tout élément tentant de l'utiliser doit rendre une police de repli. Si la police se charge avec succès pendant cette période, elle est utilisée normalement.
- Période d'échec de la police : Si la police n'est pas chargée, l'agent utilisateur la considère comme un échec de chargement, ce qui entraîne un repli normal de la police.
Définition formelle
| En lien avec les règles @ | @font-face |
|---|---|
| Valeur initiale | auto |
| Valeur calculée | comme spécifié |
Syntaxe formelle
font-display =
auto |
block |
swap |
fallback |
optional
Exemples
@font-face {
font-family: FonteExemple;
src:
url("/chemin/vers/fonts/example-font.woff") format("woff"),
url("/chemin/vers/fonts/example-font.eot") format("embedded-opentype");
font-weight: 400;
font-style: normal;
font-display: fallback;
}
Spécifications
| Specification |
|---|
| CSS Fonts Module Level 4 # font-display-desc |
Compatibilité des navigateurs
Chargement…