OUJOOD.COM
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.
La Syntaxe CSS font-size-adjust
font-size-adjust: nombre|none|initial|inherit;
| Valeurs par défaut | none |
|---|---|
| Inherited: | oui |
| Animable : | ouiEn savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.fontSizeAdjust="0.58" |
Exemple 📋 Copier le code
.mon-element {
font-size-adjust: 0.5;
font-size: 16px;
}
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 :
Exemple 📋 Copier le code
.mon-element-1 {
font-size-adjust: 0.5;
font-size: 16px;
}
.mon-element-2 {
font-size-adjust: none;
font-size: 16px;
}
.mon-element-3 {
font-size-adjust: inherit;
font-size: 16px;
}
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.