font-display : swap affiche immédiatement la police de secours et s'échange lorsque la police Web atterrit. Honnête, et cela provoque le tremblement de mise en page que vous avez vu mille fois : le texte reflue en cours de lecture, un titre bouge, un bouton en dessous bouge. Les remplacements de métriques résolvent ce problème en simulant l'échange.

@font-face {
  font-family: "Gloock Fallback";
  src: local("Georgia");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  font-family: "Gloock", "Gloock Fallback", serif;
}

Pourquoi les remplacements de métriques corrigent la redistribution

  • size-adjust redimensionne la solution de repli afin que ses largeurs rendues se rapprochent de celles de la police Web ; l'échange ne déplace que quelques caractères.
  • Les remplacements de montée, de descente et d'espacement de ligne épinglent les métriques verticales de secours sur celles de la police Web, de sorte que les zones de ligne cessent de se reproduire.
  • local() recherche une police que l'utilisateur possède déjà, donc la solution de secours ne se télécharge jamais ; toute l'astuce ajoute zéro octet.
  • La police Web elle-même conserve font-display: swap, donc first paint n'attend jamais du tout un fichier de police.

Déduire les chiffres honnêtement

  1. Chargez la police Web et la police de secours côte à côte sur une page de test, puis ajustez les quatre remplacements jusqu'à ce que les deux chaînes occupent la même case ; les flashs de peinture des outils de développement du navigateur montrent exactement quelle métrique est désactivée.
  2. La communauté fontTools dispose d'un chemin d'outils permettant de dériver automatiquement l'ajustement de la taille à partir de deux fichiers de polices ; le réglage manuel par paire dure également trois minutes.
  3. Redériver lorsque l'une ou l'autre des polices change ; un tableau de métriques est constitué de données, et les données ont besoin d'un propriétaire.
  4. Testez le numéro CLS dans Lighthouse avant et après ; la refusion de ce site s'est arrêtée mesurée à zéro lors du changement de titre.

Les polices sont la seule ressource qu'une page charge avant de pouvoir peindre son propre texte, et les mesures de secours sont le seul moyen honnête de rendre ce chargement invisible. Ingénierie typographique très gacor sans JavaScript nulle part.