Le choix du comportement d'une police Web pendant son chargement peut être une technique importante pour ajuster les performances. Le nouveau descripteur d'affichage de la police pour @font-face permet aux développeurs de décider comment leurs polices Web seront affichées (ou de remplacement), en fonction du temps de chargement.
Différences de rendu des polices à l'heure actuelle
Les polices Web permettent aux développeurs d'intégrer une typographie riche dans leurs projets. Toutefois, si l'utilisateur ne possède pas déjà une police de caractères, le navigateur doit passer du temps à la télécharger. Étant donné que les réseaux peuvent être instables, ce temps de téléchargement peut nuire à l'expérience utilisateur. Après tout, personne ne se souciera de la beauté de votre texte si son affichage prend trop de temps.
Pour réduire certains risques de téléchargement lent de police, la plupart des navigateurs implémentent un délai avant expiration au terme duquel une police de remplacement est utilisée. Cette technique est utile, mais malheureusement, les navigateurs diffèrent sur l'implémentation réelle.
| Navigateur | Délai avant expiration | Action de remplacement | Intervertir |
|---|---|---|---|
| Chrome 35 ou version ultérieure | 3 secondes | Oui | Oui |
| Opera | 3 secondes | Oui | Oui |
| Firefox | 3 secondes | Oui | Oui |
| Internet Explorer | 0 seconde | Oui | Oui |
| Safari | Aucun délai | N/A | N/A |
- Chrome et Firefox ont un délai d'inactivité de trois secondes au terme duquel le texte s'affiche avec la police de remplacement. Si la police parvient à se télécharger, un échange se produit et le texte est à nouveau affiché avec la police souhaitée.
- Internet Explorer a un délai d'expiration de zéro seconde, ce qui permet d'afficher le texte immédiatement. Si la police demandée n'est pas encore disponible, une création de remplacement est utilisée. Le texte est de nouveau affiché une fois que la police demandée est disponible.
- Safari n'a aucun comportement de délai avant expiration (ou du moins rien au-delà d'un délai avant expiration réseau de référence).
Pire encore, les développeurs disposent d'un contrôle limité pour décider de l'impact de ces règles sur leur application. Un développeur axé sur les performances peut préférer une expérience initiale plus rapide qui utilise une police de remplacement, et n'exploitera la police Web plus conviviale que lors des visites suivantes, une fois qu'elle aura eu l'occasion de la télécharger. À l'aide d'outils tels que l'API Font Loading, il est parfois possible d'ignorer certains comportements par défaut du navigateur et d'obtenir des gains de performances. Toutefois, cela s'accompagne d'une quantité considérable de code JavaScript qui doit ensuite être intégré à la page ou demandé à partir d'un fichier externe, ce qui entraîne une latence HTTP supplémentaire.
Pour remédier à cette situation, le groupe de travail CSS a proposé un nouveau descripteur @font-face, font-display, ainsi qu'une propriété correspondante pour contrôler l'affichage d'une police téléchargeable avant son chargement complet.
Chronologies de téléchargement des polices
À l'instar des comportements de délai avant expiration des polices existants que certains navigateurs implémentent aujourd'hui, font-display segmente la durée de vie d'un téléchargement de police en trois périodes principales.
- Le premier point correspond au point du blocage des polices. Au cours de cette période, si la police de police n'est pas chargée, tout élément qui tente de l'utiliser doit s'afficher avec une police de remplacement invisible. Si le type de police se charge correctement pendant la période de bloc, il est alors utilisé normalement.
- La période d'échange des polices se produit immédiatement après celle du bloc de polices. Au cours de cette période, si le type de police n'est pas chargé, tout élément qui tente de l'utiliser doit s'afficher avec une police de remplacement. Si elle se charge correctement pendant la période d'échange, elle sera utilisée normalement.
- La période d'échec des polices se produit immédiatement après la période d'échange des polices. Si la police n'est pas encore chargée au début de cette période, elle est marquée comme ayant échoué, ce qui entraîne un retour à la police normal. Sinon, elle est utilisée normalement.
Comprendre ces points signifie que vous pouvez utiliser font-display pour décider comment votre police doit s'afficher selon qu'elle a été téléchargée ou non.
Quel type d'affichage de police vous convient le mieux ?
Pour utiliser le descripteur font-display, ajoutez-le à vos règles "at-rules" (@font-face) :
@font-face {
font-family: 'Arvo';
font-display: auto;
src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}
font-display accepte actuellement la plage de valeurs suivante : auto | block | swap | fallback | optional.
auto
auto fait appel à la stratégie d'affichage des polices utilisée par le user-agent. La plupart des navigateurs disposent actuellement d'une stratégie par défaut semblable à blocage.
bloquer
block donne au type de police une courte période de bloc (3 s est recommandée dans la plupart des cas) et une période d'échange infinie. En d'autres termes, le navigateur dessine d'abord du texte "invisible" si la police n'est pas chargée, mais l'inverse dès qu'elle est chargée. Pour ce faire, le navigateur crée une police anonyme avec des métriques semblables à la police sélectionnée, mais avec tous les glyphes sans "encre". Cette valeur ne doit être utilisée que si le rendu du texte avec une police de caractères particulière est nécessaire pour que la page soit utilisable.
échange
swap attribue à la police une période de bloc de zéro seconde et une période d'échange infinie. Cela signifie que le navigateur dessine immédiatement le texte avec une création de remplacement si la police de police n'est pas chargée, mais l'inverse dès qu'elle est chargée. Comme pour block, cette valeur ne doit être utilisée que lorsqu'il est important d'afficher du texte dans une police particulière pour la page. Toutefois, quelle que soit la police utilisée, le message correct sera toujours affiché. Le texte du logo est un bon candidat pour l'échange, car l'affichage du nom d'une entreprise à l'aide d'une solution de remplacement raisonnable permet de faire passer le message, mais vous finissez par utiliser la police de caractères officielle.
Remplacement
fallback attribue à la police une période de bloc extrêmement petite (100 ms maximum, recommandée dans la plupart des cas) et une courte période d'échange (trois secondes sont recommandées dans la plupart des cas). En d'autres termes, la police s'affiche dans un premier temps avec une création de remplacement si elle n'est pas chargée, mais elle est remplacée dès son chargement. Toutefois, si le délai est trop long, la création de remplacement est utilisée pour le reste de la page. Une création de remplacement est adaptée à des éléments tels que le corps du texte, pour lequel vous souhaitez que l'utilisateur commence à lire le plus tôt possible et ne souhaite pas perturber son expérience en déplaçant le texte lorsqu'une nouvelle police se charge.
facultatif
optional donne à la police une période de bloc extrêmement petite (100 ms maximum est recommandée dans la plupart des cas) et une période d'échange de zéro seconde. Comme pour les créations de remplacement, cette option est idéale lorsque la police de téléchargement est plus utile, mais pas essentielle à l'expérience. La valeur optional (facultatif) laisse le navigateur décider s'il souhaite lancer le téléchargement de la police, ce qu'il peut choisir de ne pas faire ou de le faire avec une priorité faible en fonction de ce qu'il estime être le mieux pour l'utilisateur. Cela peut être utile dans les cas où la connexion de l'utilisateur est faible et que l'extraction d'une police n'est pas toujours la meilleure utilisation des ressources.
Prise en charge des navigateurs
font-display est actuellement derrière l'indicateur Experimental Web Platform Features (Fonctionnalités expérimentales de la plate-forme Web) dans Chrome 49 pour ordinateur et disponible dans Opera et Opera pour Android.
Démonstration
Consultez l'exemple pour essayer font-display. Pour les développeurs soucieux de leurs performances, il peut s'agir d'un outil supplémentaire de votre barre d'outils.