La font-optical-sizingpropriété CSS permet au navigateur d'ajuster le contour des glyphes de police pour les rendre plus lisibles à différentes tailles. Par exemple, un texte plus petit peut obtenir un contour plus épais pour augmenter son contraste. D'un autre côté, un texte plus grand peut obtenir quelque chose de plus «délicat» pour citer la spécification.
.element ( font-optical-sizing: none; )Les glyphes ont des contours?
Ils font! En fait, tous les glyphes les ont et ils s'adaptent à la taille de la police. Le problème est qu'un contour très fin avec une petite taille de police peut ne pas fournir suffisamment de contraste pour une meilleure lisibilité; de même, des contours plus épais à des tailles plus grandes peuvent avoir trop de poids et de contraste. font-optical-sizingtente de corriger cela en permettant au navigateur de jouer avec le contour pour qu'il se lit mieux à différentes échelles. Le résultat sera un texte plus net et des longueurs de texte plus étroites ou plus larges en fonction de la taille de la police.
Cela ne fonctionne que sur les polices prenant en charge le dimensionnement optique
Et les polices qui prennent en charge le dimensionnement optique sont des polices variables , y compris Roboto Delta, une version variable du classique Roboto de Google. Une autre police de support est Amstelvar. Les deux polices sont gérées par Type Network.
Même si une police est variable, elle doit explicitement prendre en charge le dimensionnement optique en tant que fonctionnalité.
Une autre façon de dimensionner optiquement les polices
La font-optical-sizingpropriété est le moyen le plus efficace de dimensionner optiquement une police qui la prend en charge. Une autre façon consiste à utiliser la font-variation-settingspropriété, qui vous permet de contrôler le dimensionnement optique avec opsz, qui est le mot-clé du dimensionnement optique sur les polices variables qui le prennent en charge.
Notez que l'utilisation font-variation-settingsvous oblige à définir le opszen fonction de la taille de la police afin que tout soit mis à l'échelle correctement.
.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )Syntaxe
font-optical-sizing: auto | none;- Initiale:
auto - S'applique à: tous les éléments
- Héritée: oui
- Valeur calculée: mot-clé spécifié
- Type d'animation: discret
Valeurs
auto: Il s'agit de la valeur par défaut. Il permet aux navigateurs d'optimiser le texte dans différentes tailles de police pour plus de lisibilité.none: Cela empêche les navigateurs de modifier le texte.
La propriété accepte également les valeurs de mot clé globales, y compris inherit, initialet unset.
Démo
Prise en charge du navigateur
| C'EST À DIRE | Bord | Firefox | Chrome | Safari | Opéra |
|---|---|---|---|---|---|
| Non | 17+ | 62+ | 79+ | 11+ | 66+ |
| Chrome Android | Android Firefox | Navigateur Android | Safari sur iOS | Opera Mini |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | Tout |
Lectures complémentaires
- Module de polices CSS niveau 4 (ébauche de l'éditeur)
- Documentation MDN
- Polices variables: taille optique, axes personnalisés et autres curiosités (typographie Web responsive)