Den font-optical-sizingCSS egenskab gør det muligt for browseren at justere omridset af skrifttype glyffer for at gøre dem mere læselige i forskellige størrelser. For eksempel kan mindre tekst få en tykkere kontur for at øge kontrasten. På bagsiden kan større tekst få noget, der er mere "delikat" for at citere specifikationen.
.element ( font-optical-sizing: none; )Glyffer har konturer?
De gør! Faktisk har alle tegn det, og de skaleres med størrelsen på skrifttypen. Problemet er, at en supertynd kontur i en lille skriftstørrelse muligvis ikke giver tilstrækkelig kontrast til den bedste læsbarhed; ligeledes kan tykkere konturer i større størrelser have for meget vægt og kontrast. font-optical-sizingforsøger at rette det ved at lade browseren rode med konturen, så den læser bedre i forskellige skalaer. Resultatet bliver skarpere tekst og enten smallere eller bredere tekstlængder afhængigt af skriftstørrelsen.
Dette fungerer kun på skrifttyper, der understøtter optisk størrelse
Og de skrifttyper, der understøtter optisk størrelse, er variable skrifttyper , herunder Roboto Delta, en variabel version af Googles klassiske Roboto. En anden understøttende skrifttype er Amstelvar. Begge skrifttyper vedligeholdes af Type Network.
Selvom en skrifttype er variabel, skal den eksplicit understøtte optisk størrelse som en funktion.
En anden måde at optisk formatere skrifttyper på
Den font-optical-sizingegenskab er den mest effektive måde at optisk størrelse en skrifttype, der understøtter det. En anden måde er at bruge font-variation-settingsegenskaben, som giver dig mulighed for at kontrollere optisk størrelse med opsz, som er nøgleordet for optisk størrelse på variable skrifttyper, der understøtter den.
Bemærk, at brug font-variation-settingskræver, at du indstiller opszi overensstemmelse med skriftstørrelsen, så alt skaleres ordentligt.
.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )Syntaks
font-optical-sizing: auto | none;- Initial:
auto - Gælder for: alle elementer
- Arvet: ja
- Beregnet værdi: specificeret nøgleord
- Animationstype: diskret
Værdier
auto: Dette er standardværdien. Det giver browsere mulighed for at optimere tekst i forskellige skriftstørrelser for læsbarhed.none: Dette forhindrer browsere i at ændre tekst.
Ejendommen accepterer også globale søgeord værdier, herunder inherit, initialog unset.
Demo
Browsersupport
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Ingen | 17+ | 62+ | 79+ | 11+ | 66+ |
| Android Chrome | Android Firefox | Android-browser | iOS Safari | Opera Mini |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | Alle |
Yderligere læsning
- CSS-skrifttyper Modul niveau 4 (Editorens kladde)
- MDN-dokumentation
- Variable skrifttyper: Optisk størrelse, brugerdefinerede akser og andre kuriositeter (Responsive Web Typography)