Font-size-adjust - Propriété CSS

font-size-adjust

Résumé des caractéristiques de la propriété font-size-adjust

Description rapide
Définition du coefficient d'aspect de la police.
Statut
Standard
Utilisable sur
HTML, SVG
Valeurs prédéfinies
none
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Oui.
Type d'animation
Computed value : lors d'une animation, la propriété font-size-adjust passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Polices de caractères
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: WD (document de travail)
Statut du document: REC (recommandation)

Schéma de la syntaxe de font-size-adjust.

Font-size-adjust property - Syntax diagramSyntax diagram of the font-size-adjust CSS property. See stylescss.free.fr for details. none none ex-height ex-height cap-height cap-height ch-width ch-width ic-width ic-width ic-height ic-height from-font from-font number numberfont-size-adjust:;font-size-adjust:;
Schéma syntaxique de la propriété font-size-adjust
Les liens du schéma donnent accès à plus de détails
Télécharger le schéma en SVG

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

  • number est un nombre positif ou nul, sans unité.

Description de la propriété font-size-adjust.

Pour l'instant, seul Firefox traite cette propriété (février 2022).

La propriété font-size-adjust définit un coefficient d'ajustement de la taille des caractères.

Cette propriété est surtout utile pour homogénéiser la taille des caractères entre la police choisie par le développeur et la police que le navigateur peut employer si la police demandée n'est pas disponible.

Plus précisément, font-size-adjust ajuste le ratio entre la hauteur des minuscules et la taille de la police. Ce ratio s'appelle en anglais aspect value ou encore aspect ratio. En français, on peut parler du coefficient d'aspect ou du ratio d'aspect. Ce coefficient est défini pour chaque police et en principe indiqué dans les spécifications. Nous donnons plus bas cette valeur pour les polices courantes.

Sur les exemples ci-dessous, trois polices sont affichées dans la même taille. Les trois premiers échantillons montrent que la hauteur des minuscules est différente d'une police à l'autre. La propriété font-size-adjust a été appliquée sur la deuxième série d'échantillons : la hauteur des minuscules est maintenant identique pour les trois polices. Si vous ne constatez pas de différence, c'est que votre navigateur ne traite pas font-size-adjust.

Aa Aa Aa Aa Aa Aa
Arial
Verdana
Corsiva
Arial
Verdana
Corsiva

Pas d'ajustement

Avec ajustement

 

Simulation pour font-size-adjust

Simulation du résultat de font-size-adjust
(pour les navigateurs qui ne traitent pas cette propriété)

Reportez-vous également au descripteur size-adjust qui traite de la même notion, et qui est utilisable dans la syntaxe de la directive @font-face.

Valeurs pour font-size-adjust.

  • font-size-adjust: none;

    Valeur par défaut. Aucun coefficient d'ajustement n'est utilisé.

  • font-size-adjust: ex-height;

    Le coefficient d'ajustement est calculé en divisant la hauteur du caractère x par la taille de la police.

  • font-size-adjust: cap-height;

    Le coefficient d'ajustement est calculé en divisant la hauteur des petites capitales par la taille de la police.

  • font-size-adjust: ch-width;

    Normalise la largeur des caractères en se basant sur la largeur du zéro.

  • font-size-adjust: ic-width; font-size-adjust: ic-height;

    Normalise la largeur des caractères en se basant sur la largeur ou la hauteur du caractère 水 (caractère CJK qui représente l'eau).

  • font-size-adjust: from-font;

    Applique le coefficient d'ajustement défini dans la police de caractères.

  • font-size-adjust: 0.54;

    Un nombre sans unité, supérieur à 0 et inférieur à 1 (fréquemment autour de 0.5). La taille des caractères est ajustée, en fonction du nombre indiqué, de façon à ce que les minuscules aient la même taille que celles de la police demandée. Rappelons que font-size-adjust est utile lorsque la police demandée n'est pas disponible et que le navigateur choisit une police de substitution.

    La bonne valeur pour font-size-adjust est donc égale au ratio minuscules/majuscules de la police demandée.

  • font-size-adjust: initial; (none) font-size-adjust: inherit; font-size-adjust: revert; font-size-adjust: revertLayer; font-size-adjust: unset;

    Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Coefficients d'aspect des principales polices.

Police Coefficient d'aspect
font-size-adjust		 Échantillon
Arial 0.48 Arial
Arial Black 0.66 Arial Black
Baskerville 0.48 Baskerville
Book Antiqua 0.47 Book Antiqua
Bookman Old Style 0.56 Bookman Old Style
Century 0.50 Century
Century Gothic 0.49 Century Gothic
Century Schoolbook 0.50 Century Schoolbook
Corsiva 0.57 Corsiva
Courier New 0.50 Courier New
Didot 0.49 Didot
Futura 0.37 Futura
Garamond 0.44 Garamond
Geneva 0.48 Geneva
Georgia 0.49 Georgia
Helvetica 0.49 Helvetica
Impact 0.45 Impact
Lucida Console 0.52 Lucida Console
Lucida Grande 0.52 Lucida Grande
Palatino 0.47 Palatino
Tahoma 0.49 Tahoma
Times New Roman 0.48 Times New Roman
Trebuchet MS 0.49 Trebuchet MS
Verdana 0.53 Verdana

Exemple d'animation de font-size-adjust.

Le premier exemple montre l'animation de la propriété font-size-adjust. Au premier regard, on peut avoir l'impression que c'est simplement la taille des caractères qui changent. Pourtant si on compare avec le deuxième cadre, qui lui est animé sur le propriété font-size, on voit que le résultat n'est pas le même.

Animation de font-size-adjust
Arial Corsiva Futura
Animation de font-size
Arial Corsiva Futura

Exemple interactif avec la propriété font-size-adjust.

L'échantillon de texte ci-dessous est écrit dans trois polices différentes, mais dans la même taille. Lorsque font-size-adjust est sur none, on voit nettement des différences de taille entre les lettres mnuscules de chacune de ces polices.

En choisissant une autre valeur que none on améliore l'homogénéité du texte entre les différents polices.

font-size-adjust :
Monsieur Jack, vous dactylographiez bien mieux que votre ami Wolf. (2)

(2) Pangramme utilisé par l'armée suisse pour tester le clavier des téléscripteurs (Wikipedia).

Compatibilité des navigateurs avec font-size-adjust.

La propriété et les fonctionnalités liées à font-size-adjust sont maintenant bien prises en charge par les navigateurs.

Colonne 1
Support de la propriété font-size-adjust qui définit le ratio hauteur des minuscules / hauteur des majuscules.
Colonne 2
Support de la valeur from-font pour la propriété font-size-adjust.
Colonne 3
Support du descripteur font-size-adjust pour la directive @font-face.

Remarques :

(1) Désactivé par défaut. Peut être activé dans les flags.

(2) Il manque le support pour la valeur from-font.

1
Propriété
font-size-adjust
2
Valeur
from-font
3
Descripteur
size-adjust
Estimation de la prise en charge globale.
85%
85%
91%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

1

Baidu Browser

Samsung Internet

Safari

Safari sur IOS

Chrome

Opéra

Edge

Chrome pour Androïd

Firefox pour Androïd

Firefox

Androïd Brower

KaiOS Browser

2

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse
Caniuse

Histoire de la propriété font-size-adjust.

Voir aussi, à propos des polices de caractères.

Les propriétés concernant les polices de caractères sont nombreuses. Elles sont regroupées dans le module CSS Fonts Module. Vous trouvez les définitions suivantes dans ce module :

Propriétés :

font
Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
✗
font-effect
Permet d'appliquer quelques effets au texte : relief, bordure...
font-family
Sélectionne une police de caractères parmi celles qui sont disponibles ou celles qui sont téléchargées.
⚠
font-feature-settings
Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
font-kerning
Ajustement du crénage entre caractères.
⚠
font-language-override
Définit le langage à prendre en compte lors du choix des caractères.
⚠
font-optical-sizing
Optimise la forme des caractères en fonction de leur taille.
font-palette
Définit la palette de couleurs utilisable pour les polices de caractères colorées.
font-size
Ajuste la taille des caractères, ce qui impacte aussi les units comme em, ex, etc.
✗
font-smooth
Définit si un algorithme de lissage doit être utilisé et lequel.
font-stretch
Modifie l'étirement ou la compression des caractères.
font-style
Sélectionne les styles italique ou oblique de la police de caractères.
font-synthesis
Autorise ou non le calcul des styles manquants dans la police de caractères.
⚠
font-synthesis-position
Autorise ou non le navigateur à synthétiser les caractères en exposant ou en indice.
⚠
font-synthesis-small-caps
Autorise ou non le navigateur à calculer le glyphes des caractères en petites capitales.
⚠
font-synthesis-style
Définit si le navigateur est autorisé à synthétiser les formes italiques des caractères.
⚠
font-synthesis-weight
Définit si le navigateur peut calculer ou non le glyphe des caractères gras.
font-variant
Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
font-variant-alternates
Définit la substitution de caractères (polices OTF, WOFF).
font-variant-caps
Applique une capitalisation des caractères.
font-variant-east-asian
Typographie spécifique aux caractères chinois ou japonais.
⚠
font-variant-emoji
Choisit entre une présentation en emoji ou en texte.
font-variant-ligatures
Active ou désactive la ligature des caractères.
font-variant-numeric
Définit le mode d'affichage des nombres évolués : fractions, numéros, etc.
font-variant-position
Mise en exposant ou en indice des caractères.
⚠
font-variation-settings
Donne accès aux possibilités stylistiques des polices OTF.
font-weight
Sélectionne une graisse pour les caractères.
font-width
Synonyme de font-stretch (largeur/élargissement des caractères).

Fonctions :

⚠
palette-mix()
Établit le mélange de deux palettes de couleurs issus de deux polices de caractères différentes.

Directives :

@font-face
Définit tous les paramètres d'une police de caractères téléchargeable.
⚠
@font-feature-values
Définit les variantes typographiques à utiliser.
@font-palette-values
Définit une palette de couleurs applicable ensuite à une police de caractères.

Descripteurs :

ascent-override
Descripteur pour @font-face. Définit la hauteur des caractères au dessus de la ligne de base.
descent-override
Descripteur pour @font-face. Définit la hauteur des caractères au dessous de la ligne de base.
⚠
font-display
Descripteur pour @font-face. Détermine le comportement du navigateur face aux polices de caractères longues à charger.
line-gap-override
Descripteur pour @font-face. Définit l'interligne de la police.
src
Définit la source d'un fichier de police de caractères à télécharger, ou d'une image à afficher.
unicode-range
Descripteur pour @font-face. Définit la plage des codes de caractères à télécharger dans une police.