font-display - Propriété CSS
Résumé des caractéristiques de la propriété font-display
fallback
| optional
| swap
auto
font-display
ne peut pas être animée.Description de la propriété font-display
.
font-display
est un descripteur assez technique, qui détermine quelle logique doit suivre
la navigateur au moment de télécharger les polices personnalisées.
En effet, les fichiers de polices peuvent être assez gros et prendre un temps de téléchargement
non négligeable. Que faire pendant ce temps ? Ne pas afficher les textes ? Les afficher dans une
autre police ?
Le descripteur font-display
s'utilise avec la directive @type-face
qui sert à télécharger une police
de caractères personnalisée. Exemple :
@type-face {
font-family:'Nom de la police';
src: url('chemin/fichier.otf');
font-display: swap;
}
En cas de police qui se fait attendre, les navigateurs procèdent généralement par trois étapes successives :
- Étape 1 : les contenus devant s'afficher dans la police manquante ne sont pas affichés.
L'espace qu'ils devraient occuper est néanmoins réservé, autrement dit on a des zones
blanches sur la page.
Cette étape est parfois appeléeFOIT
(F
lashO
fI
nvisibleT
ext) et peut durer de 0 à quelques secondes suivant les navigateurs.
- Étape 2 : les contenus sont affichés dans une police de remplacement.
Les textes sont donc lisibles mais pas encore dans leur police définitive.
Cette étape prend le nom de
FOUT
(Flash Of Unstyled Text).
- Étape 3 : le temps de chargement de la police est vraiment trop long, le contenu reste
définitivement affiché dans la police de substitution.
Bien entendu, et heureusement, la plupart du temps la police est téléchargée suffisamment rapidement, ou est déjà présente dans le cache. Dans ce cas, le contenu est affiché immédiatement dans la police choisie, sans qu'il soit nécessaire de passer par ces trois étapes.
font-display
permet d'ajuster la durée de chacune des étapes, ou, suivant la valeur,
de ne pas les traiter toutes.
Syntaxes pour font-display
.
- font-display: auto;
Le navigateur utilise son algorithme par défaut.
- font-display: block;
Le temps d'attente à blanc est de quelques secondes (étape 1 : FOIT). L'étape 2 (
FOUT
) n'est pas limitée dans le temps.Le texte demeure invisible pendant quelques secondes, puis est ensuite affiché dans une police de remplacement, jusqu'à ce que le police demandée soit disponible.
block
peut être utilisée lorsque le texte doit vraiment être affiché dans la police demandée, par exemple parce que des caractères spéciaux ont été utilisés, et qu'ils risquent de ne pas exister dans la police de remplacement.
Cependant il faut garder à l'esprit que le texte sera invisible pendant plusieurs secondes : on réserverablock
pour des textes courts, et surtout pas pour la page entière. - font-display: swap;
Le temps d'attente à blanc est nul ou très court (FOIT). L'étape 2 (
FOUT
) n'est pas limitée dans le temps.Le texte est immédiatement (ou presque) affiché dans une police de remplacement, sans temps d'attente à blanc. Lorsque la police est disponible, le texte est ré-affiché dans la police prévue. Cette valeur est la plus couramment employée.
swap
est intéressant pour les textes qui restent compréhensibles dans une police de remplacement mais que l'on préfère afficher dans la police demandée.
On emploieraswap
pour des textes courts car il faut garder à l'esprit que la page devra être composée deux fois : une première fois avec la police de remplacement et une deuxième fois avec la police définitive. - font-display: fallback;
Le temps d'attente à blanc et le temps de l'étape 2 sont nuls ou très courts.
Le texte est rapidement affiché dans une police de remplacement et restera définitivement dans cette police de remplacement.
fallback
peut être utilisée pour des textes longs, ou de façon plus générale pour le body de la page car elle permet d'obtenir très rapidement une page lisible, même si la police n'est pas celle qui est prévue.
D'autre part cette valeur ne nécessite pas de recomposer la page lorsque la police est enfin disponible. Lors d'un prochain chargement de cette page, la police sera retrouvée dans le cache et affichée directement. - font-display: optional;
Le temps d'attente à blanc est très court : le texte est affiché dans une police de remplacement. Le choix est laissé au navigateur de laisser le texte définitivement dans cette police ou d'attendre encore la disponibilité de la police demandée.
Cette valeur offre le même avantage que
fallback
, à savoir une bonne rapidité d'affichage. On pourra l'utiliser pour de grands textes ou pour le body de la page. - font-display:
initial
; font-display:inherit
; font-display:revert
; font-display:revert-layer
; font-display:unset
;La valeur initiale est :
.auto
Prise en charge par les navigateurs (compatibilité).
La gestion des polices téléchargeables, et la propriété font-display
sont relativement bien gérées par les navigateurs actuels.
font-display
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que font-display
.
Les spécifications CSS éditées par le W3C sont organisées en modules. font-display
fait partie du Module CSS - Polices de caractères (CSS Fonts Module). Les définitions suivantes sont également décrites dans ce même module.