Descripteurs de polices CSS

Le chargement des polices a longtemps été un bogue des performances Web, et il n'y a vraiment pas de bons choix ici . Si vous souhaitez utiliser des polices Web, vos choix sont essentiellement Flash of Invisible Text (aka FOIT) où le texte est masqué jusqu'au téléchargement de la police ou Flash of Unstyled Text (FOUT) où vous utilisez initialement la police système de secours, puis mettez-la à niveau vers le police Web lors du téléchargement. Aucune des deux options n'a vraiment «gagné» parce qu'aucune n'est vraiment satisfaisante, pour être honnête.

font-display supposé résoudre ce problème?

Le font-display ] pour @ font-face a donné ce choix au développeur Web alors qu'auparavant le navigateur décidait que (IE et Edge favorisaient FOUT dans le passé, alors que les autres navigateurs favorisaient FOIT). Cependant, au-delà de cela, cela n'a pas vraiment résolu le problème.

Un certain nombre de sites ont été déplacés vers font-display: swap lors de sa première sortie, et Google Fonts en a même fait la valeur par défaut en 2019. L'idée ici était qu'il valait mieux pour les performances d'afficher le texte aussi rapidement que possible même s'il était dans la police de remplacement, puis d'échanger la police quand il sera finalement

J'étais en faveur de cela à l'époque aussi mais je me sens de plus en plus frustré par «l'effet d'hydratation» lorsque les téléchargements de polices Web et les caractères se dilatent (ou se contractent) pour remplir l'espace suivant . Smashing Magazine, comme la plupart des éditeurs, utilise des polices Web et la capture d'écran ci-dessous montre la différence entre le rendu initial (avec les polices de secours) et le rendu final (avec les polices Web):

Maintenant, lorsqu'elles sont placées côte à côte, les polices Web sont beaucoup plus agréables et correspondent à la marque Smashing Magazine. Mais nous voyons aussi qu'il y a une certaine différence dans la mise en page du texte avec les deux polices. Les polices sont de tailles très différentes et, de ce fait, le contenu de l'écran change. À l'ère de Core Web Vitals et Cumulative Layout Shifts étant (à juste titre!) Reconnus comme préjudiciables aux utilisateurs, font-display: swap est un mauvais choix à cause de cela.

] Je suis revenu à font-display: block sur les sites dont je m'occupe car je trouve vraiment le changement de texte assez choquant et ennuyeux. S'il est vrai que le bloc n'arrête pas les décalages (la police est toujours rendue en texte invisible), cela les rend au moins moins visibles pour l'utilisateur. J'ai également optimisé par le chargement de polices en préchargeant des polices que j'ai rendues aussi petites que possible par polices sous-définies auto-hébergées – les visiteurs ont donc souvent vu les polices de remplacement pour seulement un petite période de temps. Pour moi, la «période de blocage» de swap était trop courte et je préférerais honnêtement attendre un peu plus longtemps pour obtenir le rendu initial correct.

Utilisation de font-display: facultatif Peut résoudre FOIT et FOUT – à un coût

L'autre option est d'utiliser font-display: facultatif . Cette option rend les polices Web facultatives ou, pour le dire autrement, si la police n’est pas là au moment où la page en a besoin, c’est au navigateur de ne jamais l’échanger. Avec cette option, nous évitons à la fois FOIT et FOUT en n'utilisant fondamentalement que des polices qui ont déjà été téléchargées.

Si la police Web n'est pas disponible alors, nous retombons à la police de secours, mais le La navigation sur la page suivante (ou un rechargement de cette page) utilisera la police – comme elle aurait dû se terminer le téléchargement maintenant. Cependant, si la police Web n'a pas d'importance pour le site, il peut être judicieux de simplement la supprimer complètement – ce qui est encore mieux pour les performances Web!

Cependant, les premières impressions comptent et d'avoir cette charge initiale sans Web les polices semblent tout à fait un peu trop. Je pense aussi – sans aucune preuve pour étayer cela d'ailleurs! – que cela donnera aux gens l'impression, peut-être inconsciemment, que quelque chose ne va pas sur le site Web et peut avoir un impact sur la façon dont les gens l'utilisent.

Ainsi, toutes les options de police ont leurs inconvénients, parmi lesquels l'option de ne pas utiliser le Web du tout, ou en utilisant des polices système (ce qui est limitant – mais peut-être pas aussi limitatif que beaucoup le pensent !).

Rendre votre police de remplacement plus étroitement adaptée à votre police

le chargement de la police a consisté à rapprocher la police de remplacement de la police Web réelle pour réduire autant que possible le décalage perceptible, de sorte que l'utilisation de swap ait moins d'impact. Bien que nous ne pourrons jamais éviter complètement les changements, nous faisons mieux que dans la capture d'écran ci-dessus. L'application Font Style Matcher de Monica Dinculescu est souvent citée dans les articles sur le chargement des polices et donne un aperçu fantastique de ce qui devrait être possible ici. Il vous permet utilement de superposer le même texte dans deux polices différentes pour voir qui ils sont différents:

Malheureusement, le problème avec la correspondance des styles de police est que nous ne pouvons pas appliquer ces styles CSS uniquement aux polices de remplacement, nous devons donc utiliser JavaScript et l'API FontFace.load pour appliquer (ou annuler) ces différences de style lorsque la police Web se charge .

La quantité de code n'est pas énorme, mais elle semble toujours comme un peu plus d'effort qu'il ne devrait l'être. Bien qu'il existe d'autres avantages et possibilités d'utiliser l'API JavaScript pour cela, comme l'explique Zach Leatherman dans ce discours fantastique datant de 2019 – vous pouvez réduire les reflux et gérer data-server mode et prefers-reduction-motion cependant cela (notez cependant que les deux ont depuis été exposés au CSS depuis cet entretien).

Il est également plus difficile de gérer les polices en cache que nous avons déjà , sans parler des différences dans divers styles de secours. Ici sur Smashing Magazine, nous essayons un certain nombre de solutions de secours pour tirer le meilleur parti des polices système installées par différents utilisateurs et systèmes d'exploitation:

 font-family: Mija, -apple-system, Arial, BlinkMacSystemFont, roboto slab, droid serif, segoe ui, Ubuntu, Cantarell, Géorgie, serif;

Savoir quelle police est utilisée, ou avoir des ajustements séparés pour chacun et s'assurer qu'ils sont appliqués correctement peut rapidement devenir assez complexe.

Une meilleure solution arrive

Donc, c'est un bref rattrapage sur la situation actuelle à ce jour. Cependant, de la fumée commence à apparaître à l'horizon .

Excité pour le descripteur CSS "size-Adjust" pour les polices: réduisez les changements de mise en page en faisant correspondre une police de secours et une police Web principale via un facteur d'échelle pour les glyphes (pourcentage).

Voir https://t.co/mdRW2BMg6A par @cramforce pour une démo (Chrome Canary / FF Nightly avec drapeaux) pic.twitter.com/hEg1HfUJlT

– Addy Osmani (@addyosmani) 22 mai 2021

Comme je l'ai mentionné plus tôt, le principal problème avec l'application des différences de style de secours était de les ajouter, puis de les supprimer . Et si nous pouvions dire au navigateur que ces différences ne concernent que les polices de remplacement?

C'est exactement ce qu'un nouvel ensemble de descripteurs de polices proposé dans le cadre du Module de polices CSS niveau 5 faire. Celles-ci sont appliquées aux déclarations @ font-face où la police individuelle est définie.

Simon Hearne a écrit à propos d'une mise à jour proposée de la police. spécification des descripteurs de visage qui comprend quatre nouveaux descripteurs: ascension-override descente-override line-gap-override et advance-override . Vous pouvez jouer avec le terrain de jeu F-mods que Simon a créé pour charger vos polices personnalisées et de secours, puis jouer avec les remplacements pour obtenir une correspondance parfaite.

Comme l'écrit Simon, la combinaison de ces quatre Les descripteurs nous ont permis de remplacer la disposition de la police de secours pour correspondre à la police Web, mais ils ne modifient vraiment que l'espacement vertical et le positionnement. Donc, pour l'espacement des caractères et des lettres, nous devrons fournir du CSS supplémentaire. Cependant, il change maintenant avec le prochain descripteur d'ajustement de taille .

Comment ça marche? Supposons que vous ayez le CSS suivant:

 @ font-face {
  famille de polices: 'Lato';
  src: url ('/ static / fonts / Lato.woff2') format ('woff2');
  poids de la police: 400;
}

h1 {
    famille de polices: Lato, Lato-fallback, Arial;
}

Ensuite, vous devez créer un @ font-face pour la police de secours Arial et lui appliquer des descripteurs d'ajustement . Vous obtiendrez alors l'extrait de code CSS suivant:

 @ font-face {
  famille de polices: 'Lato';
  src: url ('/ static / fonts / Lato.woff2') format ('woff2');
  poids de la police: 400;
}

@ font-face {
    famille de polices: "Lato-fallback";
    ajustement de la taille: -9900,00%;
    remontée-contournement: 96%;
    src: local ("Arial");
}

h1 {
    famille de polices: Lato, Lato-fallback, sans-serif;
}

Cela signifie que lorsque le Lato-fallback est utilisé initialement (comme Arial est une police locale et peut être utilisée immédiatement sans téléchargement supplémentaire), alors la taille -adjust et ascent-override vous permettent de vous rapprocher de la police Lato. C'est une déclaration supplémentaire @ font-face à écrire, mais certainement beaucoup plus facile que les cerceaux que nous devions franchir auparavant!

Dans l'ensemble, il y a quatre principaux @font -face descripteurs inclus dans cette spécification: size-Adjust ascent-override descente-override et line- gap-override avec quelques autres encore à l'étude pour l'indice, l'exposant et d'autres cas d'utilisation.

Malte Ubl a créé un outil très utile pour calculer automatiquement ces paramètres étant donné deux polices et un navigateur qui prend en charge ces nouveaux paramètres (plus à ce sujet dans un instant!). Comme le souligne Malte, les ordinateurs sont bons dans ce genre de choses! Idéalement, nous pourrions également exposer ces paramètres pour les polices courantes aux développeurs Web, par exemple. peut-être donner ces conseils dans des collections de polices comme Google Fonts? Cela aiderait certainement à augmenter l’adoption.

Désormais, différents systèmes d’exploitation peuvent avoir des paramètres de police légèrement différents et les obtenir exactement comme il faut est fondamentalement une tâche impossible, mais ce n’est pas le but. Le but est de combler l'écart, donc utiliser font-display: swap n'est plus une expérience aussi choquante, mais nous n'avons pas besoin d'aller aux extrêmes de facultatif ou pas de web

Quand pouvons-nous commencer à l'utiliser?

Trois de ces paramètres ont déjà été livrés dans Chrome depuis la version 87 bien que le descripteur de clé size-Adjust ne soit pas encore disponible dans n'importe quel navigateur stable. Cependant, Chrome Canary l'a, tout comme Firefox derrière un drapeau donc ce n'est pas un concept abstrait et lointain, mais quelque chose qui pourrait atterrir très bientôt.

Pour le moment, la spécification contient toutes sortes de clauses de non-responsabilité et d'avertissements indiquant qu'il n'est pas encore prêt pour le temps réel, mais on a certainement l'impression d'y arriver. Comme toujours, il y a un équilibre entre nous, les concepteurs et les développeurs, en le testant et en donnant des commentaires, et en décourageant son utilisation, de sorte que l'implémentation ne reste pas bloquée parce que trop de gens finissent par utiliser une version antérieure. a déclaré son intention de rendre ajustement de taille disponible dans Chrome 92 dont la sortie est prévue pour le 20 juillet indiquant vraisemblablement qu'il est presque là.

Donc, pas tout à fait prêt encore, mais il semble que cela arrive dans un avenir très proche. En attendant, jouez avec la démo de Chrome Canary et voyez si elle peut aller un peu plus près de résoudre vos problèmes de chargement de polices et l'impact CLS qu'ils causent.

(vf, il)