Propriété CSS font-display

❮ Précédent Suivant ❯

La propriété font-display définit comment les fichiers de fonte sont téléchargés et affichés par le navigateur. Cette propriété a les valeurs suivantes:

auto
block
swap
fallback
optional

La propriété font-display indique au navigateur si FOUT (flash of unstyled text) ou FOIT (flash of invisible text) est préféré.

Valeur initiale	auto
Appliquée à	Tous les éléments. Elle est aussi appliquée à ::first-letter et ::first-line.
Héritée	Oui.
Animable	Non.
Version	CSS1
Syntaxe DOM	object.style.fontDisplay = "swap";

Syntaxe

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

Exemple

@font-face {
font-family: 'MyWebFont'; /* Définir le nom de la fonte */
src:  url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'); /* Définir la place où la fonte sera téléchargée */
font-display: fallback; /* Définir le comportement du navigateur lorsque la fonte est téléchargée */
}

Valeurs

Valeur	Description
auto	L'affichage de la fonte est définit par le navigateur.
block	Cache brièvement le texte jusqu'à ce que la fonte soit entièrement téléchargée.
swap	Donne à la fonte une très petite période de bloc et une période d’échange infinie.
fallback	Donne à la fonte une très petite période de bloc et une période d’échange aussi courte.
optional	Donne à la fonte une très petite période de bloc et aucune période d'échange.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.