font-optical-sizing

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

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

css

/* 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.

Définition formelle

Valeur initiale	`auto`
Applicabilité	all elements and text. S'applique aussi à `::first-letter` et `::first-line`.
Héritée	oui
Valeur calculée	comme spécifié
Type d'animation	discrète

Syntaxe formelle

font-optical-sizing = 
  auto  |
  none

Exemples

CSS

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

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

Specification
CSS Fonts Module Level 4 # font-optical-sizing-def

Compatibilité des navigateurs

BCD tables only load in the browser