Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
font-optical-sizing
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2020.
La propriétéCSSfont-optical-sizing définit si le rendu du texte est optimisé pour l'affichage à différentes tailles.
Exemple interactif
font-optical-sizing: auto;font-optical-sizing: none;<section> <div> <h2>Chapitre 3</h2> <p> Ce jeudi-là, quelque chose se déplaçait silencieusement à travers l'ionosphère, à plusieurs kilomètres au-dessus de la surface de la planète ; plusieurs choses en fait, plusieurs douzaines de grosses choses jaunes et massives en forme de dalles, aussi grandes que des immeubles de bureaux, silencieuses comme des oiseaux. </p> </div></section>@font-face { src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf"); font-family: "Amstelvar"; font-style: normal;}#example-element { font-family: "Amstelvar", serif; text-align: left;}#example-element h2 { font-size: 36px;}#example-element p { font-size: 12px;}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: revert;font-optical-sizing: revert-layer;font-optical-sizing: unset;Valeurs
Description
Le dimensionnement optique est activé par défaut pour les polices qui possèdent un axe de variation de taille optique. L'axe de variation de taille optique est représenté paropsz dansfont-variation-settings.
Lorsque le dimensionnement optique est utilisé, les petites tailles de texte sont souvent affichées avec des traits plus épais et des empattements plus grands, tandis que les grandes tailles de texte sont souvent affichées de façon plus délicate avec un contraste plus marqué entre les traits épais et fins.
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | tous les éléments et le texte. S'applique aussi à::first-letter et::first-line. |
| Héritée | oui |
| Valeur calculée | comme défini |
| Type d'animation | discrète |
Syntaxe formelle
font-optical-sizing =
auto|
none
Exemples
Désactiver le dimensionnement optique
<p> Ce paragraphe est dimensionné pour une meilleure lecture. C'est le comportement par défaut.</p><p> 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>@font-face { src: url("AmstelvarAlpha-VF.ttf"); font-family: "Amstelvar"; font-style: normal;}p { font-size: 36px; font-family: "Amstelvar", serif;}.no-optical-sizing { font-optical-sizing: none;}Note :La police utilisée dans cet exemple — qui possède un dimensionnement optique et est disponible sous licence libre — est un bon moyen de tester. Vous pouvez le trouveren téléchargement sur GitHub(angl.).
Spécifications
| Specification |
|---|
| CSS Fonts Module Level 4 # font-optical-sizing-def |
Compatibilité des navigateurs
See also
- La propriété
font-size - La propriété
font-size-adjust - Apprendre : Mise en forme fondamentale du texte et des polices