La font-optical-sizingproprietà CSS consente al browser di regolare il contorno dei glifi dei caratteri per renderli più leggibili con dimensioni diverse. Ad esempio, un testo più piccolo può avere un contorno più spesso per aumentarne il contrasto. Il rovescio della medaglia, il testo più grande può ottenere qualcosa di più "delicato" per citare le specifiche.
.element ( font-optical-sizing: none; )I glifi hanno contorni?
Loro fanno! In effetti, tutti i glifi li hanno e si scalano con la dimensione del carattere. Il problema è che un contorno super sottile con una dimensione del carattere minuscola potrebbe non fornire un contrasto sufficiente per la migliore leggibilità; allo stesso modo, i contorni più spessi a dimensioni maggiori possono avere troppo peso e contrasto. font-optical-sizingtenta di correggerlo consentendo al browser di giocherellare con il contorno in modo che legga meglio a scale diverse. Il risultato sarà un testo più nitido e lunghezze di testo più strette o più larghe a seconda della dimensione del carattere.
Funziona solo con i caratteri che supportano il dimensionamento ottico
E i caratteri che supportano il dimensionamento ottico sono caratteri variabili , tra cui Roboto Delta, una versione variabile del classico Roboto di Google. Un altro font di supporto è Amstelvar. Entrambi i caratteri sono gestiti da Type Network.
Anche se un carattere è variabile, deve supportare esplicitamente il dimensionamento ottico come caratteristica.
Un altro modo per ridimensionare otticamente i caratteri
La font-optical-sizingproprietà è il modo più efficiente per ridimensionare otticamente un carattere che lo supporta. Un altro modo è utilizzare la font-variation-settingsproprietà, che consente di controllare il dimensionamento ottico con opsz, che è la parola chiave per il dimensionamento ottico sui caratteri variabili che lo supportano.
Si noti che l'utilizzo font-variation-settingsrichiede di impostare opszin base alla dimensione del carattere in modo che tutto venga ridimensionato correttamente.
.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )Sintassi
font-optical-sizing: auto | none;- Iniziale:
auto - Si applica a: tutti gli elementi
- Ereditato: sì
- Valore calcolato: parola chiave specificata
- Tipo di animazione: discreta
Valori
auto: Questo è il valore predefinito. Consente ai browser di ottimizzare il testo con caratteri di diverse dimensioni per la leggibilità.none: Questo impedisce ai browser di modificare il testo.
La struttura accetta anche valori delle parole chiave globali, tra cui inherit, initiale unset.
Demo
Supporto del browser
| IE | Bordo | Firefox | Cromo | Safari | musica lirica |
|---|---|---|---|---|---|
| No | 17+ | 62+ | 79+ | 11+ | 66+ |
| Android Chrome | Android Firefox | Browser Android | iOS Safari | Opera Mini |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | Tutti |
Ulteriore lettura
- Modulo font CSS livello 4 (bozza del redattore)
- Documentazione MDN
- Caratteri variabili: dimensioni ottiche, assi personalizzati e altre curiosità (tipografia Web reattiva)