Propriété font-size-adjust
La propriété font-size-adjust permet
de contrôler la taille de la police, sans modifier
font-size
(augmenter ou diminuer).
Application : supposons que dans font-family
deux polices soient spécifiées séparées par une virgule, par exemple,
Georgia, "Times New Roman". Supposons
que l'ordinateur de l'utilisateur n'ait pas la police Georgia
- dans ce cas, "Times New Roman" sera appliquée.
Cependant, nous rencontrons un problème - avec la même
valeur de font-size
les polices apparaîtront différemment. Dans l'exemple
ci-dessous, les deux paragraphes ont un font-size
de 16px, mais des font-family différentes.
Regardez comment les tailles diffèrent :
<p style="font-size: 16px; font-family: Georgia;">
Lorem ipsum dolor sit amet.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman';">
Lorem ipsum dolor sit amet.
</p>
:
Cela se produit parce que la taille affichée
de la police dépend dans une large mesure non pas
de la propriété font-size,
qui ne définit que la taille générale de la police,
mais du rapport entre les valeurs de la propriété font-size
et la grandeur x-height (x-height
est la différence entre la taille de la lettre minuscule
"x" et de la lettre majuscule "X" pour une police
donnée).
Ce rapport est appelé l'aspect de la police et est calculé par la formule : aspect = font-size / x-height.
La propriété font-size-adjust résout le problème des tailles
(elle permet de modifier l'aspect de la police), elle
forcera la deuxième police à apparaître de la même
taille que la première.
Faisons en sorte que la police Times
New Roman soit de la même taille que
Georgia. Nous connaissons l'aspect de Georgia
- c'est 0.5 (voir le tableau ci-dessous).
Définissons font-size-adjust pour le texte
avec Times New Roman à la valeur 0.5
et nous verrons que le deuxième texte est devenu de la même
taille que le premier :
<p style="font-size: 16px; font-family: Georgia;">
Lorem ipsum dolor sit amet.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.5;">
Lorem ipsum dolor sit amet.
</p>
:
Syntaxe
sélecteur {
font-size-adjust: nombre | none;
}
Valeurs
| Valeur | Description |
|---|---|
number |
Un nombre définit l'aspect de la police. |
none |
Aucun ajustement de la taille de la police. |
Valeur par défaut : none.
Comment déterminer la valeur de l'aspect pour une police ?
Regardez cet extrait de la spécification W3C :
Le facteur de proportionnalité (aspect) pour
les polices sélectionnées peut être calculé en
comparant le même texte, mais avec différentes
valeurs de font-size-adjust. Si la valeur
de la propriété est correctement ajustée, alors pour une taille de police identique
le texte restera inchangé pour toutes
les polices utilisées sur la page.
Je donne les valeurs d'aspect que je connais pour
quelques polices : Georgia - 0.5,
Times New Roman - 0.46, Verdana -
0.58.
Exemple
Comparez l'apparence du texte avec différentes valeurs
de font-size-adjust et le même font-size
et font-family :
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.5;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.6;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
:
Exemple . Application dans la vie réelle
Le code ci-dessous fait en sorte qu'en cas d'absence
sur l'ordinateur de l'utilisateur de la police Georgia,
la police appliquée Times New Roman
soit de la même taille que Georgia :
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl suspendisse egetile.
</p>
p {
font-size: 16px;
font-family: Georgia, "Times New Roman";
font-size-adjust: 0.5;
}
:
