Font-display - Descripteur CSS
Résumé des caractéristiques du descripteur font-display
@font-face. Détermine le comportement du navigateur face aux polices de caractères longues à charger.auto | block | swap | fallback | optionalautofont-display ne peut pas être animée.Schéma syntaxique de font-display.
font-displayLes liens du schéma donnent accès à plus de détails
Description du descripteur 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 @font-face qui sert à télécharger une police de caractères personnalisée. Exemple :
@font-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(FlashOfInvisibleText) 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 du descripteur font-display.
- @font-face { ... font-display: auto; }
Le navigateur utilise son algorithme par défaut.
- @font-face { ... 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.
blockpeut ê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éserverablockpour des textes courts, et surtout pas pour la page entière. - @font-face { ... 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.
swapest 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 emploieraswappour 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-face { ... 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.
fallbackpeut ê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-face { ... 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.
Exemple interactif avec font-display.
La police utilisée pour afficher le mot "Résultat" ci-dessous est très longue à charger :
au moins 5 secondes (le téléchargement du fichier est volontairement ralenti).
Lorsque vous choisissez une valeur pour font-display, cela provoque un rechargement de
la page et donc également de la police. Observez attentivement ce qui se passe au niveau du mot "Résultat".
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-displayNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
KaiOS Browser
Opéra Mobile
Opéra
Safari
Safari sur IOS
Firefox pour Androïd
Samsung Internet
Chrome
Edge
Firefox
Androïd Brower
Chrome pour Androïd
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Voir aussi, au sujet des polices.
Les spécifications CSS éditées par le W3C sont organisées en modules.
La propriété font-display fait partie du module CSS Fonts Module).
Les définitions suivantes sont également décrites dans ce même module.
Propriétés :
em, ex, etc.Fonctions :
Directives :
Descripteurs :
@font-face. Définit la hauteur des caractères au dessus de la ligne de base.@font-face. Définit la hauteur des caractères au dessous de la ligne de base.@font-face. Définit l'interligne de la police.@font-face. Définit la plage des codes de caractères à télécharger dans une police.