Polices de remplacement visuellement stables

Lorsque les polices Web se chargent, elles remplacent souvent une police de remplacement de dimensions différentes, même si les deux sont définies sur la même valeur font-size. Cela entraîne un "décalage de mise en page" (Cumulative Layout Shift) et peut rendre le texte illisible si les lettres minuscules de la police de remplacement (hauteur d'x) sont très différentes de celles de la police préférée.

La propriété font-size-adjust résout ce problème en normalisant la taille de la police en fonction d'une métrique spécifique (généralement la hauteur x), ce qui garantit que le texte occupe le même espace visuel, quelle que soit la police actuellement active.

Procédure d'implémentation

1. Identifier le format de la police de votre choix

Pour normaliser les polices de remplacement, vous avez besoin de la "valeur d'aspect" (le ratio entre les lettres minuscules et la taille de la police) de votre police principale.

• Détection automatique (recommandé) : utilisez le mot clé from-font pour permettre au navigateur d'extraire le ratio de votre police Web principale.
• Calcul manuel : si vous connaissez la valeur spécifique (par exemple, 0,545 pour Verdana), vous pouvez la fournir directement pour un contrôle plus précis.

2. Appliquer font-size-adjust au conteneur de texte

Appliquez la propriété à l'élément ou à un conteneur parent. Cela garantit que si le chargement de la police principale échoue ou est en cours, la police de remplacement est mise à l'échelle pour correspondre à la taille visuelle de la police principale.

.text-content {
  /* Define your font stack as usual */
  font-family: "MyWebFont", "Arial", sans-serif;
  font-size: 1rem;

  /* MANDATORY: Normalize the font size based on the primary font's x-height.
     This ensures that if 'Arial' is used as a fallback, it is scaled 
     to match the x-height of 'MyWebFont'. */
  font-size-adjust: from-font;
}

3. (Facultatif) Ajuster pour des métriques spécifiques

Bien que la hauteur d'x soit la valeur par défaut et la plus courante, vous pouvez normaliser en fonction d'autres métriques, comme cap-height (utile pour les en-têtes tout en majuscules) ou ch-width (utile pour les polices à espacement fixe).

h1 {
  /* Normalize based on the height of capital letters */
  font-size-adjust: cap-height from-font;
}

4. Vérifier la stabilité visuelle

Assurez-vous que la valeur font-size-adjust aligne correctement l'élément de remplacement. Vous pouvez tester cela en bloquant temporairement la police Web ou en ajustant la déclaration font-family dans les outils de développement de votre navigateur, puis en vérifiant que la mise en page du texte reste stable.

Stratégies de remplacement

Dans les navigateurs qui ne sont pas compatibles avec font-size-adjust, la police s'affiche à son échelle par défaut. Cela peut entraîner des décalages de mise en page ou des modifications de la lisibilité lors des changements de police.

Pour atténuer ce problème sans font-size-adjust, vous pouvez utiliser les descripteurs @font-face size-adjust, ascent-override et descent-override pour ajuster manuellement les polices de remplacement, bien qu'ils soient plus complexes à calculer qu'une seule valeur font-size-adjust.