Propriété CSS font-display

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.

Support de Navigateurs

60.0+ 58.0+ 11.1+ 47.0+


Trouvez-vous cela utile?

Articles Associées