Lastnost font-optical-sizingCSS omogoča brskalniku, da prilagodi oris glifov pisav, da postanejo bolj čitljivi pri različnih velikostih. Manjše besedilo lahko na primer dobi debelejši obris, da poveča kontrast. Na drugi strani lahko večje besedilo navaja nekaj, kar je bolj "občutljivo", če navedemo specifikacijo.
.element ( font-optical-sizing: none; )Glifi imajo obrise?
So! Pravzaprav jih imajo vsi glifi in se prilagajajo velikosti pisave. Težava je v tem, da izredno tanek obris pri majhni velikosti pisave morda ne zagotavlja dovolj kontrasta za najboljšo čitljivost; podobno imajo lahko debelejši obrisi pri večjih velikostih preveliko težo in kontrast. font-optical-sizingposkuša to popraviti tako, da omogoča brskalniku, da se ukvarja z orisom, tako da se bolje bere v različnih merilih. Rezultat bo ostrejše besedilo in ožja ali širša dolžina besedila, odvisno od velikosti pisave.
To deluje samo pri pisavah, ki podpirajo optično velikost
In pisave, ki podpirajo optično velikost, so spremenljive pisave , vključno z Roboto Delta, spremenljivo različico Googlovega klasičnega Robota. Druga podporna pisava je Amstelvar. Obe pisavi vzdržuje Type Network.
Tudi če je pisava spremenljiva, mora izrecno podpirati optično velikost kot funkcijo.
Drug način za optično velikost pisav
font-optical-sizingLastnost je najbolj učinkovit način za optično velikost pisave, ki podpira to. Drugi način je uporaba font-variation-settingslastnosti, ki vam omogoča nadzor optičnega velikosti s opsz, ki je ključna beseda za optično določanje velikosti na spremenljivih pisavah, ki jo podpirajo.
Upoštevajte, da uporaba font-variation-settingszahteva, da nastavite opszv skladu z velikostjo pisave, tako da se vse pravilno prilagodi.
.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )Sintaksa
font-optical-sizing: auto | none;- Začetno:
auto - Velja za: vse elemente
- Podedovano: da
- Izračunana vrednost: določena ključna beseda
- Vrsta animacije: diskretna
Vrednote
auto: To je privzeta vrednost. Brskalnikom omogoča čitljivost besedila v različnih velikostih pisave.none: To preprečuje brskalnikom spreminjanje besedila.
Premoženje sprejema tudi globalne vrednote ključnih besed, vključno z inherit, initialin unset.
Demo
Podpora brskalnika
| IE | Rob | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Ne | 17+ | 62+ | 79+ | 11+ | 66+ |
| Android Chrome | Android Firefox | Brskalnik Android | iOS Safari | Opera Mini |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | Vse |
nadaljnje branje
- Modul pisav CSS 4. stopnja (urednikov osnutek)
- Dokumentacija MDN
- Spremenljive pisave: optična velikost, osi po meri in druge zanimivosti (odzivna spletna tipografija)