Polices mixtes visuellement stables

Lorsque vous mélangez différentes familles de polices, par exemple lorsque vous insérez des extraits de code intégrés ou que vous changez de famille de polices pour différents thèmes, les différences de "hauteur d'œil" (la hauteur des lettres minuscules) peuvent faire apparaître une police beaucoup plus petite ou plus grande que l'autre. Cela peut entraîner une mauvaise lisibilité et des décalages de mise en page.

La propriété font-size-adjust vous permet de normaliser la taille visuelle du texte en ajustant la taille de la police en fonction d'une métrique de police spécifique (généralement la hauteur d'x).

Mise en œuvre, étape par étape

1. OBLIGATOIRE : Appliquez font-size-adjust aux éléments pour lesquels la cohérence des polices est essentielle, comme les conteneurs utilisant des polices Web ou les blocs avec des familles de polices mixtes.
2. OBLIGATOIRE : Utilisez le mot clé from-font sur les éléments pour que la taille de la police des éléments imbriqués corresponde automatiquement aux proportions de la police principale.
3. OBLIGATOIRE : Utilisez une valeur de remplacement numérique spécifique pour le format de font-size-adjust (par exemple, font-size-adjust: 0.5) afin de normaliser les proportions indépendamment lorsque les proportions de police sur lesquelles se baser proviennent de thèmes différents.

Exemple : Normaliser automatiquement la hauteur d'x

L'utilisation de from-font est l'approche la plus robuste. Elle extrait le format de la hauteur d'x de la première police disponible et l'applique aux polices des éléments enfants.

.content-area {
  font-family: "MyCustomWebFont";
  /* Automatically extract and apply x-height ratio from MyCustomWebFont */
  font-size-adjust: from-font;
}
.content-area span{
  font-family: "MyOtherCustomWebFont"
}

Exemple : Spécifier une hauteur d'x spécifique

Lorsque la police à ajuster n'est pas un enfant de la police sur laquelle baser la taille, spécifiez une valeur pour ajuster la hauteur d'x.

.theme{
  font-family: Verdana, sans-serif;
}
.theme.alternate{
  font-family: Times;
  /* Set to the aspect ratio (x-height / font-size) of the primary font */
  font-size-adjust: 0.51;
}

Stratégies de remplacement

OBLIGATOIRE : Dans les navigateurs qui ne sont pas compatibles avec font-size-adjust, les polices s'affichent avec leur valeur font-size naturelle. Pour y remédier, vous devez fournir une stratégie de remplacement valide pour les navigateurs non compatibles à l'aide d'un bloc @supports :

• Utilisez @supports not (font-size-adjust: from-font) pour détecter la compatibilité avec font-size-adjust et fournir des styles de remplacement (par exemple, une hauteur de ligne ou une taille de police ajustée).
• Choisissez des polices dont la hauteur d'x est similaire à celle de votre police principale.
• Appliquez des remplacements font-size et line-height spécifiques pour les familles de polices alternatives et imbriquées.

/* Feature detection for font-size-adjust */
@supports not (font-size-adjust: from-font) {
  .content-area {
    /* Manual adjustment for browsers without support (if needed) */
    line-height: 1.6;
    font-size: 1.2rem;
  }
}