font-display : ce que font vraiment swap, block, fallback et optional

Ce que contrôle font-display

Une police web met du temps à arriver, et le navigateur doit dessiner le texte avant. font-display est le descripteur que l’on place dans une règle @font-face pour dire ce qui se passe entre-temps : retenir le texte jusqu’à ce que la police soit prête, l’afficher tout de suite dans une police de repli puis basculer, ou renoncer à la police si elle tarde trop. Les cinq valeurs sont auto, block, swap, fallback et optional, et la valeur initiale est auto.

Sous le capot, la spécification décrit un minuteur de téléchargement qui traverse trois périodes. Pendant la période de blocage, un élément utilisant la police doit être rendu avec une fonte de repli invisible. Pendant la période de substitution, il est rendu avec une police de repli ordinaire. Et lorsque la période d’échec commence, un téléchargement inachevé est marqué comme échoué et le mécanisme de repli habituel s’applique définitivement. Chaque valeur de font-display n’est qu’un choix de durée pour les deux premières périodes.

La partie invisible est plus intéressante que sa réputation ne le laisse croire. La spécification ne dit pas que le texte est absent : elle dit que le navigateur crée une fonte anonyme aux mêmes métriques que la vraie, mais dont tous les glyphes sont invisibles. L’espace est donc déjà réservé à la bonne taille, si bien que rien ne se replace à l’arrivée de la police. L’éclair de texte invisible est un éclair d’espace blanc parfaitement à la bonne forme.

Comment s’en servir

1. Choisissez une valeur et un temps de téléchargement. Le temps est en millisecondes à partir du lancement du minuteur par le navigateur. Les boutons d’exemple couvrent une police téléchargée puis écartée, une qui montre les trois rendus l’un après l’autre, une qui retient le texte, et une qui n’est jamais substituée.
2. Lisez la chronologie. Chaque ligne est un intervalle de temps et ce que voit le lecteur pendant celui-ci : un blanc, une police de repli, ou la vôtre. La ligne de résultat en dessous dit clairement si la police finit par s’afficher.
3. Modifiez les périodes. Les trois champs de durée sont modifiables à dessein, car la spécification recommande ces valeurs au lieu de les imposer. Mettez la période de blocage à zéro — l’exemple donné par la spécification elle-même de ce qu’un navigateur peut autoriser au lecteur — et la phase invisible disparaît.

Tous les chiffres du tableau habituel sont des recommandations

Cherchez font-display et vous retrouverez partout le même tableau, avec 3s et 100ms comme s’ils étaient fixes. Ils ne le sont pas, et la spécification prend un soin inhabituel à le dire. block donne une période de blocage courte, 3s étant recommandée dans la plupart des cas. swap donne une période de blocage extrêmement courte, 100ms ou moins étant recommandées dans la plupart des cas. fallback combine les deux. Ce sont les deux seuls nombres de tout le descripteur, et les deux sont assortis de la même réserve.

Vient ensuite une note qui couvre les cinq valeurs d’un coup : les navigateurs peuvent employer des durées légèrement différentes, ou des comportements plus élaborés que la syntaxe ne sait même pas exprimer. Et elle va plus loin en indiquant qu’un navigateur peut laisser le lecteur passer outre le choix de l’auteur, l’exemple donné étant de forcer une période de blocage de zéro seconde pour toutes les polices. Les chiffres sont donc indicatifs deux fois : le navigateur n’est pas tenu de les suivre, et le lecteur peut les court-circuiter.

C’est pourquoi cette page les rend modifiables plutôt que de les afficher comme des constantes. Mettre le blocage à zéro supprime entièrement la phase invisible et le texte apparaît aussitôt dans une police de repli ; allonger la période de substitution sauve une police que le chiffre recommandé aurait jetée. Aucune de ces deux situations n’est hypothétique : la spécification les autorise explicitement.

auto en est la version la plus franche. Toute sa définition tient en ceci : la politique d’affichage est laissée au navigateur. La spécification ajoute seulement que beaucoup de navigateurs adoptent par défaut un comportement proche de block, ce qui est une observation sur le monde et non une règle. Écrire auto, ou ne rien écrire, revient à n’avoir choisi aucun comportement.

optional n’a aucune période

Tous les tableaux recopiés attribuent à optional une période de blocage et une période de substitution. La spécification ne lui en donne aucune. Elle définit la valeur par son résultat : si la police peut être chargée immédiatement, c’est-à-dire si elle est disponible pour le premier rendu du texte, elle est employée ; sinon, elle est traitée comme si ses deux périodes avaient déjà expiré.

Ce qui suit, ce sont deux règles strictes plutôt que des durées. Une police optional ne doit jamais faire sauter la mise en page pendant son chargement et, une fois le texte affiché avec un repli, il ne doit pas être rendu avec la police optional pour le reste de la vie de la page. Ni plus tard dans la session, ni au rendu suivant : la police est écartée. C’est pourquoi le scénario optional de cette page n’affiche qu’une seule ligne, immuable : pas de changement de phase, donc pas de saut, ce qui est tout l’intérêt de la valeur.

Le navigateur dispose ici d’une latitude inhabituelle. Il peut interrompre le téléchargement dès qu’il décide que la police ne servira pas, la télécharger avec une priorité très faible et, s’il estime mieux servir le lecteur ainsi, ne même pas lancer le téléchargement et passer directement au repli. En pratique, cela signifie souvent qu’une police déclarée optional est récupérée à la première visite, ignorée, puis servie depuis le cache à la seconde.

La lecture pratique est qu’optional n’est pas un repli plus strict. C’est une promesse différente : cette police est un agrément, ne retardez ni ne dérangez jamais le lecteur pour elle. La choisir, c’est accepter que certains visiteurs ne verront tout simplement jamais votre caractère.

Ce que cette page ne vous dira pas

Elle simule les règles, elle ne mesure pas votre site. Le temps de téléchargement est le nombre que vous avez saisi, pas une observation sur un vrai réseau, et rien ici ne récupère de police. Pour savoir combien la vôtre met réellement, servez-vous du panneau réseau de votre navigateur, en gardant à l’esprit que le minuteur démarre lorsque le navigateur tente d’utiliser la fonte pour la première fois, ce qui n’est pas le chargement de la feuille de style.

Les durées étant des recommandations, la chronologie est celle d’un navigateur qui les suivrait, et non forcément celle du vôtre. Un navigateur employant d’autres chiffres, appliquant une politique plus élaborée que la syntaxe ne peut exprimer, ou respectant un réglage du lecteur, se comportera différemment tout en restant parfaitement conforme. C’est un fait qui tient au descripteur plus qu’une limite de cette page, et c’est la raison pour laquelle les durées sont modifiables.

Deux choses restent hors du modèle. La spécification autorise un navigateur à retarder légèrement le rendu d’un élément utilisant une police optional, pour laisser à un cache local peut-être lent le temps de répondre, sans dire de combien : la fenêtre employée ici pour immédiatement est donc un substitut et non un chiffre cité. Par ailleurs, le chargement des polices interagit avec le préchargement, avec l’API de chargement de polices de CSS et avec la priorité attribuée à la requête, dont rien n’est simulé.

Enfin, il s’agit d’une seule fonte. Une page comportant plusieurs fontes d’une même famille lance plusieurs de ces minuteurs à la fois, et ce que voit le lecteur est la combinaison des deux, y compris le cas où le repli est remplacé pour une graisse mais pas pour une autre.

Pourquoi est-ce gratuit ?

Déduire une chronologie de quelques nombres s’exécute dans votre navigateur. Aucun serveur n’intervient, il n’y a donc rien à facturer ni de compte à créer.

Rien n’est envoyé et aucune police n’est téléchargée. Rechargez la page et elle aura oublié ce que vous avez saisi.