Déterminer le comportement d'une police Web lors de son chargement peut être une technique de réglage des performances importante. Le nouveau descripteur font-display pour @font-face permet aux développeurs de décider de la façon dont leurs polices Web seront affichées (ou de leur remplacement), en fonction du temps de chargement.
Différences entre l'affichage des polices aujourd'hui
Les polices Web permettent aux développeurs d'intégrer une typographie riche à leurs projets. En contrepartie, si l'utilisateur ne possède pas déjà une police, le navigateur doit passer un certain temps à la télécharger. Étant donné que les réseaux peuvent être instables, ce temps de téléchargement peut avoir un impact négatif sur l'expérience utilisateur. Après tout, personne ne se souciera de la beauté de votre texte si son affichage prend un temps démesuré.
Pour atténuer le risque d'un téléchargement de police lent, la plupart des navigateurs implémentent un délai avant lequel une police de remplacement est utilisée. Il s'agit d'une technique utile, mais malheureusement, les navigateurs diffèrent quant à 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 d'inactivité | N/A | N/A |
- Chrome et Firefox disposent d'un délai avant expiration de trois secondes, au bout duquel le texte s'affiche avec la police de remplacement. Si la police parvient à être téléchargée, un échange se produit et le texte est à nouveau affiché avec la police souhaitée.
- Internet Explorer dispose d'un délai avant expiration de zéro seconde, ce qui entraîne un rendu immédiat du texte. Si la police demandée n'est pas encore disponible, une police de remplacement est utilisée, et le texte est à nouveau affiché plus tard lorsque la police demandée est disponible.
- Safari n'a pas de comportement de délai avant expiration (ou du moins rien au-delà d'un délai avant expiration réseau de référence).
Pour aggraver la situation, les développeurs ont un contrôle limité sur l'impact de ces règles sur leur application. Un développeur soucieux des performances peut préférer une expérience initiale plus rapide qui utilise une police de remplacement et n'utiliser la police Web plus attrayante que lors des visites suivantes, une fois qu'elle a eu le temps d'être téléchargée. À l'aide d'outils tels que l'API Font Loading, il est possible de remplacer certains des comportements par défaut du navigateur et d'améliorer les performances, mais cela implique d'écrire des quantités non négligeables de code JavaScript qui doivent ensuite être intégrées à la page ou demandées à 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, et une propriété correspondante pour contrôler l'affichage d'une police téléchargeable avant qu'elle ne soit entièrement chargée.
Délais de téléchargement des polices
Comme les 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.
- La première période correspond à la période du bloc de polices. Pendant cette période, si la police n'est pas chargée, tout élément qui tente de l'utiliser doit s'afficher avec une police de remplacement invisible. Si la police se charge correctement pendant la période de blocage, elle est ensuite utilisée normalement.
- La période de changement de police a lieu immédiatement après la période de blocage de la police. Pendant cette période, si la police n'est pas chargée, tout élément qui tente de l'utiliser doit s'afficher avec une police de remplacement. Si la police se charge correctement pendant la période de remplacement, elle est ensuite utilisée normalement.
- La période de défaillance de la police se produit immédiatement après la période de remplacement de la police. Si la police n'est pas encore chargée au début de cette période, elle est marquée comme chargement ayant échoué, ce qui entraîne un remplacement de police normal. Sinon, la police est utilisée normalement.
Comprendre ces périodes vous permet d'utiliser font-display pour décider de la façon dont votre police doit s'afficher en fonction de son téléchargement ou de son absence.
Quel paramètre font-display vous convient le mieux ?
Pour utiliser le descripteur font-display, ajoutez-le à vos règles at-@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 est actuellement compatible avec la plage de valeurs auto | block | swap | fallback | optional suivante.
auto
auto utilise la stratégie d'affichage de la police utilisée par l'user-agent. La plupart des navigateurs ont actuellement une stratégie par défaut semblable à block (bloquer).
bloquer
block attribue à la police une période de blocage courte (3 s est recommandé 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 remplace la police dès qu'elle est chargée. Pour ce faire, le navigateur crée une police anonyme avec des métriques similaires à la police sélectionnée, mais avec tous les glyphes ne contenant aucune "encre". Cette valeur ne doit être utilisée que si l'affichage du texte dans 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 blocage de zéro seconde et une période de swap infinie. Cela signifie que le navigateur dessine immédiatement le texte avec un fallback si la police n'est pas chargée, mais qu'il la remplace dès qu'elle est chargée. Comme pour block, cette valeur ne doit être utilisée que lorsque l'affichage du texte dans une police particulière est important pour la page, mais que l'affichage dans n'importe quelle police permet de transmettre un message correct. Le texte du logo est un bon candidat pour le remplacement, car afficher le nom d'une entreprise à l'aide d'un remplacement raisonnable permettra de transmettre le message, mais vous finirez par utiliser la typographie officielle.
remplacement
fallback attribue à la police une période de blocage extrêmement courte (100 ms ou moins est recommandé dans la plupart des cas) et une période d'échange courte (trois secondes est recommandé dans la plupart des cas). En d'autres termes, la police est d'abord affichée avec un remplacement si elle n'est pas chargée, mais la police est remplacée dès qu'elle est chargée. Toutefois, si trop de temps s'écoule, le fallback sera utilisé pendant toute la durée de vie de la page. Le fallback est un bon candidat pour des éléments tels que le corps du texte, où vous souhaitez que l'utilisateur commence à lire dès que possible et que vous ne voulez pas perturber son expérience en déplaçant le texte pendant le chargement d'une nouvelle police.
facultatif
optional attribue à la police une période de blocage extrêmement courte (100 ms ou moins est recommandé dans la plupart des cas) et une période de swap de zéro seconde. Comme pour fallback, il s'agit d'un bon choix lorsque la police à télécharger est plutôt un "plus", mais pas essentiel à l'expérience. La valeur optional laisse au navigateur le choix de lancer le téléchargement de la police, qu'il peut choisir de ne pas effectuer ou de le faire en priorité basse, selon ce qu'il pense être le mieux pour l'utilisateur. Cela peut être utile lorsque l'utilisateur dispose d'une connexion faible et que l'importation d'une police n'est pas la meilleure utilisation des ressources.
Prise en charge des navigateurs
font-display est actuellement derrière l'indicateur Experimental Web Platform Features dans Chrome 49 pour ordinateur, et est disponible dans Opera et Opera pour Android.
Démo
Consultez l'exemple pour essayer font-display. Pour les développeurs soucieux des performances, il peut s'agir d'un outil supplémentaire utile dans votre boîte à outils.