Propriété CSS font-size-adjust

La propriété font-size-adjust préserve la lisibilité du texte lorsque la font-family principale est indisponible et qu'une police de substitution est utilisée à la place. Elle force le texte rendu à conserver une x-height cible quelle que soit la police réellement utilisée dans la pile.

Pourquoi la x-height est importante

La x-height est la hauteur des lettres minuscules (comme la lettre « x »), mesurée depuis la ligne de base. La em-height est la taille totale de la police. Le rapport entre ces deux valeurs est appelé la valeur d'aspect de la police :

aspect value = x-height / em-height

Deux polices définies avec la même font-size peuvent quand même sembler nettement différentes en taille, car leurs valeurs d'aspect diffèrent. Par exemple, Verdana (valeur d'aspect ~ 0,58) paraît plus grande et plus lisible que Georgia (~ 0,52) à la même taille en points. Ainsi, lorsqu'une police de substitution remplace votre police principale, le texte substitué peut sembler trop grand ou trop petit même si font-size n'a pas changé.

font-size-adjust résout ce problème. Lorsque vous lui donnez un nombre, le navigateur redimensionne la police en cours d'utilisation de sorte que sa x-height soit égale à ce nombre multiplié par le font-size actuel. La taille visuelle des lettres minuscules reste alors constante quelle que soit la police qui l'emporte dans la chaîne de substitution.

Un flux de travail pratique : prenez la valeur d'aspect de votre police préférée (premier choix) et passez-la comme valeur de font-size-adjust. Les polices de substitution sont alors ajustées pour correspondre à l'aspect de votre police préférée.

Valeur initiale	none
S'applique à	Tous les éléments. S'applique également à ::first-letter et ::first-line.
Hérité	Oui.
Animatable	Oui.
Version	CSS2.1
Syntaxe DOM	object.style.fontSizeAdjust = "0.5";

Remarque : La prise en charge de font-size-adjust par les navigateurs est faible. Firefox la prenait en charge jusqu'à la version 118, puis l'a supprimée dans la version 119 (2023), et elle n'a jamais été implémentée dans Chrome, Safari ou Edge. En pratique, vous ne pouvez plus vous y fier. L'approche moderne la plus robuste consiste à héberger vos polices vous-même (afin que la substitution se déclenche rarement) et à ajuster la police de substitution avec les descripteurs size-adjust, ascent-override et descent-override dans une règle @font-face.

Syntaxe

Syntaxe de la propriété CSS font-size-adjust

font-size-adjust: number | none | initial | inherit;

Exemple de la propriété font-size-adjust

Dans l'exemple ci-dessous, les deux paragraphes demandent une police peu susceptible d'être installée ("Made Up Font") et se rabattent sur sans-serif. Le second paragraphe ajoute font-size-adjust, de sorte que son texte de substitution est normalisé à une x-height fixe. Dans un navigateur qui implémente encore cette propriété, le paragraphe ajusté est plus cohérent en lecture :

<!DOCTYPE html>
<html>
  <head>
    <title>font-size-adjust example</title>
    <style>
      p {
        font-family: "Made Up Font", sans-serif;
        font-size: 20px;
      }
      .adjusted {
        font-size-adjust: 0.5;
      }
    </style>
  </head>
  <body>
    <h1>font-size-adjust</h1>
    <p>Without font-size-adjust: the fallback font keeps its own x-height.</p>
    <p class="adjusted">
      With font-size-adjust: 0.5 the fallback x-height is normalized.
    </p>
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description
none	Aucun ajustement de la taille de la police. Il s'agit de la valeur par défaut de la propriété.
number	Un nombre positif représentant le rapport d'aspect (x-height divisée par em-height).
initial	Force la propriété à utiliser sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Compatibilité des navigateurs

Navigateur	Prise en charge
Chrome	Non pris en charge
Firefox	1.5–118 (supprimé dans la v119)
Safari	Non pris en charge
Edge	Non pris en charge
Opera	Non pris en charge

Entraînement

Pratique

Quelle est la fonction principale de la propriété 'font-size-adjust' en CSS ?

Elle contrôle le niveau de gras d'une police.Elle préserve la x-height d'une police et garantit qu'elle n'est pas déformée lors d'un changement de police.Elle ajuste la couleur de la police.Elle garantit que la lisibilité des lettres minuscules est préservée lorsque la police est modifiée.Elle redimensionne la police pour s'adapter à la largeur du viewport.

Voir aussi

Propriété CSS font-size — définir la taille réelle du texte.
Propriété CSS font-family — définir la pile de polices et ses substitutions.
Règle CSS @font-face — charger des polices personnalisées et ajuster les substitutions avec size-adjust.
Raccourci CSS font — définir plusieurs propriétés de police à la fois.