Publié le 23 juillet 2024
La propriété CSS font-size-adjust est disponible dans Chrome dès aujourd'hui et fait partie de la version de référence nouvellement disponible. Cette propriété peut vous aider à éviter le décalage de votre mise en page lorsque les polices de remplacement sont chargées et à assurer la lisibilité des polices de remplacement à des tailles de police plus petites. La propriété font-size-adjust fait partie de Interop 2024. Il s'agit donc d'une nouvelle victoire pour les efforts visant à améliorer l'interopérabilité de la plate-forme Web.
Problème
Lorsque vous comparez deux polices définies sur la même taille, le texte affiché peut occuper une quantité d'espace très différente, en fonction de la forme et de la taille des glyphes. Par exemple, la démonstration suivante montre du texte en Verdana et en Arial, tous deux définis sur 16 pixels.
La différence de taille s'explique par le fait que la valeur d'aspect, c'est-à-dire la hauteur des lettres minuscules par rapport aux lettres majuscules d'une police, varie d'une police à l'autre.
Cela peut entraîner deux problèmes lorsqu'une police avec une valeur d'aspect différente est utilisée comme solution de remplacement. Tout d'abord, la quantité d'espace occupée par la police change. Deuxièmement, la police de remplacement que vous choisissez peut être moins lisible que celle spécifiée en premier, en particulier pour les petites tailles de police. En effet, la hauteur relative des lettres minuscules par rapport aux majuscules est un facteur clé de lisibilité.
Comment font-size-adjust vous aide
La propriété font-size-adjust vous permet d'ajuster votre police de remplacement pour qu'elle corresponde mieux à la première police. L'exemple suivant montre les deux polices présentées précédemment. Cette fois, la deuxième police a été ajustée pour correspondre à la première.
font-size-adjust.Cet exemple utilise une seule valeur, un nombre, qui ajuste les polices à l'aide de la métrique de police par défaut de ex-height. Il s'agit du ratio entre la hauteur de l'en-tête, la hauteur d'un x minuscule dans la police, et la taille de la police. Vous pouvez également spécifier la métrique de police utilisée. Dans l'exemple suivant, j'ai normalisé les polices à l'aide du mot clé ch-width, en plus du nombre.
font-size-adjust avec la métrique de police ch-width.Pour connaître toutes les valeurs possibles, consultez la documentation MDN pour font-size-adjust.
Il est intéressant d'examiner votre site avec votre police de remplacement et de voir si un petit ajustement avec font-size-adjust peut aider les lecteurs qui utilisent la police de remplacement à bénéficier d'une meilleure expérience, en particulier maintenant qu'elle est disponible partout.