Den font-optical-sizingCSS egenskapen gjør leseren til å justere omrisset av skrift symboler for å gjøre dem mer leselige i ulike størrelser. For eksempel kan mindre tekst få en tykkere oversikt for å øke kontrasten. På baksiden kan større tekst få noe som er mer "delikat" for å sitere spesifikasjonen.
.element ( font-optical-sizing: none; )Glyfer har konturer?
De gjør! Faktisk har alle tegn dem, og de skaleres med størrelsen på skrifttypen. Problemet er at et supertynt omriss med liten skriftstørrelse kanskje ikke gir nok kontrast for best lesbarhet; Tilsvarende kan tykkere konturer i større størrelser ha for mye vekt og kontrast. font-optical-sizingprøver å korrigere det ved å la nettleseren fikle med omrisset, slik at det leser bedre på forskjellige skalaer. Resultatet blir skarpere tekst og enten smalere eller bredere tekstlengder, avhengig av skriftstørrelsen.
Dette fungerer bare på skrifttyper som støtter optisk størrelse
Og skriftene som støtter optisk størrelse er variable skrifter , inkludert Roboto Delta, en variabel versjon av Googles klassiske Roboto. En annen støttetype er Amstelvar. Begge skriftene vedlikeholdes av Type Network.
Selv om en skrift er variabel, må den eksplisitt støtte optisk størrelse som en funksjon.
En annen måte å optisk formatere skrifttyper på
Den font-optical-sizingegenskapen er den mest effektive måten for optisk størrelse en skrift som støtter den. En annen måte er å bruke font-variation-settingsegenskapen, som lar deg kontrollere optisk størrelse med opsz, som er nøkkelordet for optisk størrelse på variable skrifttyper som støtter den.
Merk at bruk font-variation-settingskrever at du stiller inn opszi samsvar med skriftstørrelsen, slik at alt skaleres ordentlig.
.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )Syntaks
font-optical-sizing: auto | none;- Første:
auto - Gjelder: alle elementer
- Arvet: ja
- Beregnet verdi: spesifisert nøkkelord
- Animasjonstype: diskret
Verdier
auto: Dette er standardverdien. Det lar nettlesere optimalisere tekst i forskjellige skriftstørrelser for lesbarhet.none: Dette forhindrer nettlesere i å endre tekst.
Eiendommen godtar også globale søkeord verdier, inkludert inherit, initialog unset.
Demo
Nettleserstøtte
| DVS | Kant | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Nei | 17+ | 62+ | 79+ | 11+ | 66+ |
| Android Chrome | Android Firefox | Android-nettleser | iOS Safari | Opera Mini |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | Alle |
Videre lesning
- CSS Fonts Module Level 4 (Editor's Draft)
- MDN-dokumentasjon
- Variable skrifttyper: Optisk størrelse, tilpassede akser og andre kuriositeter (Responsive Web Typography)