Contrôler les performances de police avec font-display

Rob Dodson

Le choix du comportement d'une police Web pendant son chargement est une technique importante de réglage des performances. Le nouveau descripteur d'affichage de la police pour @font-face permet aux développeurs de décider comment leurs polices Web s'afficheront (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'incorporer une typographie riche dans leurs projets avec le compromis suivant : si l'utilisateur ne possède pas déjà le navigateur doit passer du temps à la télécharger. Comme les réseaux peuvent est irrégulière, ce temps de téléchargement peut nuire à l'expérience expérience. Après tout, personne ne se préoccupera de la beauté de votre texte met beaucoup de temps à s'afficher.

Pour limiter le risque d'un téléchargement lent des polices, la plupart des navigateurs implémentent un délai avant expiration au terme duquel une police de remplacement est utilisée. C'est une technique utile, mais Malheureusement, les navigateurs ne sont pas mis en œuvre.

• 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 changement et le texte est de nouveau affiché avec la police souhaitée.
• Internet Explorer a un délai d'expiration de zéro seconde, ce qui entraîne l'affichage du texte le rendu. Si la police demandée n'est pas encore disponible, une création de remplacement est utilisée. le texte sera de nouveau affiché une fois que la police demandée sera disponible.
• Safari n'a pas de comportement lié au délai avant expiration (ou du moins rien au-delà d'un réseau de référence) le délai avant expiration).

Pour ne rien arranger, les développeurs ont un contrôle limité sur les décisions règles auront une incidence sur leur application. Un développeur axé sur les performances peut préférer une première expérience plus rapide utilisant une police de remplacement et qui n'exploite lors des visites suivantes, après son téléchargement. À l'aide d'outils tels que l'API Font Loading, il peut être possible de remplacer certains des comportements de navigateur par défaut et améliorer les performances, le coût d'écriture de quantités non négligeables de JavaScript, qui doivent ensuite être intégrés à la page ou demandés à partir d'un fichier externe, ce qui génère Latence HTTP.

Pour remédier à cette situation, le groupe de travail des CSS a proposé une nouvelle le descripteur @font-face, font-display, et une propriété correspondante pour pour contrôler le rendu d'une police téléchargeable avant son chargement complet.

Chronologies de téléchargement des polices

Similaires aux comportements d'expiration du délai de police 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 catégories périodes.

1. Le premier point correspond au point du blocage des polices. Pendant 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 invisible. Si le type de police se charge correctement pendant pendant la période de blocage, le type de police est alors utilisé normalement.
2. La période d'échange des polices se produit immédiatement après celle 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 plutôt s'afficher avec une police de remplacement. Si la police de caractères s'affiche correctement se charge pendant la période d'échange, le type de police est alors utilisé normalement.
3. La période d'échec des polices survient immédiatement après la période d'échange de la police. Si la police n'est pas encore chargée au début de cette période, il est marqué comme ayant échoué, ce qui entraîne un remplacement de police normal. Sinon, la police est utilisé normalement.

Pour bien comprendre ces règles, vous pouvez utiliser font-display pour déterminer 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 utilisent actuellement une stratégie par défaut semblable à bloquer.

bloquer

La valeur block accorde une courte période de blocage au type de police (recommandation : 3 s dans la plupart des cas). et une période d'échange infinie. En d'autres termes, le navigateur dessine "invisible" SMS si la police n'est pas chargée, mais la remplace dès qu'elle charge. Pour ce faire, le navigateur crée une police anonyme avec les métriques. similaire à la police sélectionnée, mais tous les glyphes ne contenant pas d'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 n'est pas chargé, mais remplace le type de police dès qu'il est chargé. Semblable à block, cette valeur ne doit être utilisée que lorsque le rendu du texte dans une police particulière est importante pour la page, mais le rendu dans n'importe quelle police aura le message. Le texte du logo peut être remplacé par swap, car l'affichage d'une le nom de l'entreprise en utilisant une solution de remplacement raisonnable pourra faire passer le message, mais vous finalement utiliser la police de caractères officielle.

remplacement

fallback attribue à la police une période de blocage extrêmement petite (100 ms maximum recommandé 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, le type de police est affiché avec une création de remplacement s'il n'est pas chargé, mais la police est remplacée dès qu'elle est chargée. Toutefois, si le délai s'écoule trop longtemps, l'annonce de remplacement est utilisée pour le reste de la page à vie. fallback est adapté à des éléments tels que le corps du texte, pour lesquels vous que l'utilisateur commence à lire le plus tôt possible et ne souhaite pas déranger leur expérience en décalant le texte à mesure qu'une nouvelle police se charge.

facultatif

optional donne à la police une période de bloc extrêmement petite (100 ms maximum est recommandé dans la plupart des cas) et une période d'échange de zéro seconde. Comme pour les créations de remplacement, C'est un bon choix lorsque le téléchargement de la police est plus pratique. mais pas essentielles à l'expérience. Si la valeur facultatif correspond à la valeur navigateur pour décider de lancer ou non le téléchargement de la police. ou avec une faible priorité, en fonction de ce qu'il pense être pour l'utilisateur. Cela peut être utile lorsque l'utilisateur est sur une connexion faible et l’extraction d’une police n’est peut-être pas 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 de bureau, et disponible dans Opera et Opera pour Android.

Démo

Consultez l'exemple pour illustrer font-display le tir. Pour les développeurs soucieux de leurs performances, un outil très utile dans votre boîte à outils !