font-optical-sizingCSS ominaisuus mahdollistaa selaimen säätää ääriviivat fontin kuvioita ja parantaa niiden luettavuutta eri kokoja. Esimerkiksi pienempi teksti voi saada paksumman ääriviivan kontrastin lisäämiseksi. Kääntöpuolelta isompi teksti voi saada jotain, joka on "herkempää" spesifikaation lainaamiseksi.
.element ( font-optical-sizing: none; )Kuvioilla on ääriviivat?
He tekevät! Itse asiassa kaikilla kuvioilla on ne ja ne skaalautuvat kirjasimen koon mukaan. Ongelmana on, että erittäin ohut ääriviiva pienellä kirjasinkoolla ei välttämättä tarjoa tarpeeksi kontrastia parhaan luettavuuden saavuttamiseksi; vastaavasti paksummilla ääriviivoilla suuremmissa kooissa voi olla liikaa painoa ja kontrastia. font-optical-sizingyrittää korjata sen sallimalla selaimen hioa ääriviivoja, jotta se lukisi paremmin eri mittakaavoissa. Tuloksena on terävämpi teksti ja joko kapeampi tai leveämpi tekstin pituus fontin koosta riippuen.
Tämä toimii vain kirjasimilla, jotka tukevat optista mitoitusta
Optista kokoa tukevat kirjasimet ovat vaihtelevia fontteja , mukaan lukien Roboto Delta, Googlen klassisen Roboton muuttuva versio. Toinen tukeva kirjasin on Amstelvar. Molempia fontteja ylläpitää Type Network.
Vaikka fontti on vaihteleva, sen on tuettava nimenomaisesti optista kokoa ominaisuutena.
Toinen tapa kirjasinten optiseen kokoon
font-optical-sizingOmaisuus on tehokkain tapa optisesti kokoa fontin, joka tukee sitä. Toinen tapa on käyttää font-variation-settingsominaisuutta, jonka avulla voit hallita optista kokoa opsz, joka on avainsana optiselle mitoitukselle sitä tukevissa muuttuvissa kirjasimissa.
Huomaa, että käyttö font-variation-settingsedellyttää, että asetat opszfontin koon mukaan, jotta kaikki skaalautuvat oikein.
.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )Syntaksi
font-optical-sizing: auto | none;- Varhainen:
auto - Koskee kaikkia elementtejä
- Peritty: kyllä
- Laskettu arvo: määritetty avainsana
- Animaation tyyppi: erillinen
Arvot
auto: Tämä on oletusarvo. Sen avulla selaimet voivat optimoida tekstiä eri kirjasinkokoina luettavuuden vuoksi.none: Tämä estää selaimia muokkaamasta tekstiä.
Ominaisuus hyväksyy myös globaali avainsanan arvot, mukaan lukien inherit, initialja unset.
Demo
Selaimen tuki
| IE | Reuna | Firefox | Kromi | Safari | Ooppera |
|---|---|---|---|---|---|
| Ei | 17+ | 62+ | 79+ | 11+ | 66+ |
| Android Chrome | Android Firefox | Android-selain | iOS Safari | ooppera Mini |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | Kaikki |
Lisälukemista
- CSS-fonttien moduuli, taso 4 (toimittajan luonnos)
- MDN-dokumentaatio
- Vaihtelevat fontit: Optinen koko, mukautetut akselit ja muut uteliaisuudet (Reagoiva verkkotyyppi)