Utiliser la propriété font-size-adjust pour ajuster la taille de police de votre site web
La propriété font-size-adjust vous permet de mieux contrôler la taille de la police lorsque la première police sélectionnée n'est pas disponible. Lorsqu'une police n'est pas disponible, le navigateur utilise la deuxième police spécifiée. Cela peut entraîner un changement important de la taille de la police. Pour éviter cela, utilisez la propriété font-size-adjust. Toutes les polices ont une "valeur d'aspect" qui correspond à la différence de taille entre la lettre minuscule 'x' et la lettre majuscule 'X'. Lorsque le navigateur connaît la valeur d'aspect de la première police sélectionnée, il peut déterminer la taille de la police à utiliser pour afficher le texte avec la deuxième police choisie.
Comprendre comment et pourquoi utiliser la propriété CSS font-size-adjust
La propriété CSS font-size-adjust permet de régler l'ajustement de la taille de police pour un élément donné. Cela peut être utile lorsque vous utilisez des polices de caractères qui ont des glyphs de différentes tailles, comme certaines polices de caractères cursives ou de style manuscrit.
Lorsque vous utilisez cette propriété, le navigateur essaiera de maintenir le ratio entre la hauteur des glyphs d'une police et la taille de la police elle-même, même si vous modifiez la taille de la police avec la propriété font-size. Cela signifie que les glyphs plus grands ne seront pas agrandis de manière disproportionnée lorsque vous augmentez la taille de la police, et que les glyphs plus petits ne seront pas réduits de manière trop importante lorsque vous réduisez la taille de la police.
Dans cet exemple, nous avons défini la propriété font-size-adjust sur 0.5 et la propriété font-size sur 16px. Cela signifie que le navigateur essaiera de maintenir un ratio de 0,5 entre la hauteur des glyphs et la taille de la police, même si la taille de la police est modifiée.
Prise en charge de la propriété css font-size-adjust dans les navigateurs
Il est important de noter que la propriété font-size-adjust n'est pas prise en charge par tous les navigateurs. Elle est principalement prise en charge par Mozilla Firefox et Safari. Si vous utilisez cette propriété dans votre code CSS, assurez-vous de vérifier si elle est prise en charge par les navigateurs que vous souhaitez prendre en charge.
Valeurs de la propriété font-size-adjust
La propriété CSS font-size-adjust accepte les valeurs suivantes :
Un nombre : La valeur doit être un nombre compris entre 0 et 1. Plus la valeur est proche de 0, plus le ratio entre la hauteur des glyphs et la taille de la police sera petit. Plus la valeur est proche de 1, plus le ratio sera grand. Par exemple, si vous définissez la propriété sur 0.5, le navigateur essaiera de maintenir un ratio de 0,5 entre la hauteur des glyphs et la taille de la police. none : Cette valeur spéciale indique au navigateur de ne pas ajuster la taille de police. initial : Définit cette propriété à sa valeur par défaut.
inherit : Cette valeur indique que la propriété doit être héritée de l'élément parent.
Voici un exemple de code qui utilise différentes valeurs de la propriété font-size-adjust :
Dans cet exemple, mon-element-1 a un ratio de 0,5 entre la hauteur des glyphs et la taille de la police, mon-element-2 n'a pas de ratio et mon-element-3 hérite du ratio de l'élément parent.
En résumé, la propriété CSS font-size-adjust permet de régler l'ajustement de la taille de police pour un élément donné, ce qui peut être utile lorsque vous utilisez des polices de caractères avec des glyphs de différentes tailles. Cependant, il est important de noter que cette propriété n'est pas prise en charge par tous les navigateurs, il est donc important de vérifier si elle est prise en charge avant de l'utiliser dans votre code CSS.