font-size-adjust

La propriété font-size-adjust permet de choisir une taille de police selon la taille des caractères en minuscules plutôt que selon la taille des majuscules. Cela est particulièrement utile lorsque la lisibilité des fontes, notamment celles de petite taille, est déterminée par la taille des minuscules plutôt que par celle des majuscules.

La lisibilité peut devenir un problème lorsque la première police indiquée par font-family n'est pas disponible et que la police de remplacement possède un facteur de forme très différent (ce facteur correspond au ratio de la taille des minuscules sur la taille de la fonte).

Pour utiliser cette propriété d'une façon compatible avec les navigateurs qui ne prennent pas en charge font-size-adjust, on définira le facteur par lequel on multiplie la valeur de la propriété font-size. Cela signifie généralement que la propriété doit correspondre au facteur de forme de la première fonte. Ainsi, lorsqu'une feuille de style définit :

font-size: 14px;  
font-size-adjust: 0.5;

On indique en fait que les minuscules de la fonte utilisée doivent mesurer 7px de haut (0.5 × 14px).

Valeur initiale	`none`
Applicabilité	tous les éléments. S'applique aussi à `::first-letter` et `::first-line`.
Héritée	oui
Média	visuel
Valeur calculée	comme spécifié
Type d'animation	un nombre
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* On utilise la taille de fonte définie */
font-size-adjust: none;

/* On utilise une fonte pour laquelle
   les minuscules font la moitié de la 
   taille définie */
/* Type <number> */
font-size-adjust: 0.5;

/* Valeurs globales */
font-size-adjust: inherit;
font-size-adjust: initial;
font-size-adjust: unset;

Valeurs

none

La taille de la fonte est uniquement choisie grâce à la propriété font-size.

<number>

La taille de la fonte est choisie afin que les minuscules (selon la taille horizontale de la fonte) mesurent X fois font-size.

Le nombre indiqué devrait la plupart du temps correspondre au facteur de forme de la première fonte listée avec font-family. Cela permet d'obtenir le même résultat dans les différents navigateurs, qu'ils supportent font-size-adjust ou non.

0 entraînera une haute nulle pour le texte (qui sera donc caché). Pour d'anciens navigateurs, comme Firefox avant la version 40, 0 était géré comme none.

Syntaxe formelle

none | <number>

Exemples

HTML

<p>Exemples pour <code>font-size-adjust</code></p>

<p class="times">
  Voici la fonte Times sur 10 px,
  difficile à lire en petit.
</p>

<p class="verdana">
  Voici la fonte Verdana sur 10px,
  plus lisible car sans empattement
  (serif).
</p>

<p class="adjtimes">
  et voilà le texte ajusté pour 
  avoir le même facteur de forme
  qu'avec Verdana.
</p>

CSS

.times {
  font-family: Times, serif;
  font-size: 10 px;
}

.verdana {
  font-family: Verdana, sans-serif;
  font-size: 10 px;
}

.adjtimes {
  font-family: Times, sans-serif;
  font-size-adjust: 0.58;
}

Résultat

Spécifications

Spécification	État	Commentaires
CSS Fonts Module Level 3 La définition de 'font-size-adjust' dans cette spécification.	Candidat au statut de recommandation	Définition initiale.

La propriété CSS font-size-adjust fut initialement définie avec CSS 2 mais a été abandonnée dans CSS 2.1. Elle a de nouveau été définie avec CSS 3.

Fonctionnalité	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Support simple	Pas de support[2]	1.0 (1.7 ou moins)^[1] 3.0 (1.9)	Pas de support	Pas de support	Pas de support

Fonctionnalité	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile	Chrome for Android
Support simple	?	1.0 (1.9.2)	?	?	?	42.0

[1] Gecko 1.0 supportait uniquement cette fonctionnalité sur Windows. Depuis Gecko 1.9, toutes les plateformes sont prises en charge. Le bug bug 1144885, avant Gecko 40.0, faisait que font-size-adjust: 0 était interprété comme font-size-adjust: none.

[2] Une implémentation expérimentale est disponible en activant la préférence « Fonctionnalités expérimentales de la plate-forme Web » sous chrome://flags/.

Voir aussi

Un billet de David Baron sur font-size-adjust (en anglais)