La propriété CSS font-optical-sizing permet de contrôler la façon dont l'agent utilisateur rend le texte avec (ou non) différentes représentations visuelles en fonction de la taille.  Cette propriété ne fonctionne qu'avec les polices qui disposent d'un axe de variation pour la taille optique.

Par exemple, les textes de petites tailles sont généralement affichés avec des traits plus épais et des empattements (serifs) plus grands. En revanche, les textes plus grands sont souvent plus fins et utilisent plus de contrastes entre les traits fins et épais.

Note : L'axe de variation pour la taille optique est représenté par opsz dans font-variation-settings.

Syntaxe

/* Valeurs avec un mot-clé */
font-optical-sizing: none; 
font-optical-sizing: auto; /* valeur initiale */

/* Valeurs globales */
font-optical-sizing: inherit;
font-optical-sizing: initial;
font-optical-sizing: unset;

Valeurs

none
L'agent utilisateur ne modifiera pas la forme des glyphes pour une vue optimale.
auto
L'agent utilisateur modifiera la forme des glyphes pour une vue optimale.

Syntaxe formelle

auto | none

Exemples

 

CSS

@font-face {
    src: url('AmstelvarAlpha-VF.ttf');
    font-family:'Amstelvar';
    font-style: normal;
}

p {
  font-size: 36px;
  font-family: Amstelvar;
}

.no-optical-sizing {
  font-optical-sizing: none;
}

 

HTML

<p class="optical-sizing">Ce paragraphe est dimensionné pour une meilleure
 lecture. C'est le comportement par défaut.</p>

<p class="no-optical-sizing">Ce paragraphe n'est pas adapté pour une 
 meilleure lecture. Vous devriez voir une différence avec les navigateurs
 qui prennent en charge cette fonctionnalité.</p>

Note : La police utilisée dans cet exemple possède un dimensionnement optique et est disponible sous licence libre en téléchargement sur GitHub.

Spécifications

Spécification État Commentaires
CSS Fonts Module Level 4
La définition de 'font-optical-sizing' dans cette spécification.
Version de travail  

Valeur initialeauto
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniqueselon la grammaire

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome ? Edge ? Firefox Support complet 62
Support complet 62
Aucun support 60 — 62
Désactivée
Désactivée From version 60 until version 62 (exclusive): this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 62
Support complet 62
Aucun support 60 — 62
Désactivée
Désactivée From version 60 until version 62 (exclusive): this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,