font-optical-sizingCSS vara võimaldab brauseri kohandada kontuuri font glyphs et muuta need loetavad erineva suurusega. Näiteks võib väiksem tekst saada kontrastsuse suurendamiseks paksema kontuuri. Tagaküljel võib suurem tekst saada spetsifikatsiooni tsiteerimiseks midagi, mis on "delikaatsem".
.element ( font-optical-sizing: none; )Glüüfidel on piirjooned?
Nad teevad! Tegelikult on need kõigil tähestikel ja need laienevad fondi suurusega. Probleem on selles, et üliõhuke kontuur pisikese fondisuurusega ei pruugi parimal loetavusel piisavalt kontrasti pakkuda; samamoodi võivad suuremate suuruste paksemad piirjooned olla liiga suure kaalu ja kontrastiga. font-optical-sizingüritab seda parandada, lubades brauseril kontuuriga niheleda, et see erineval skaalal paremini loeks. Tulemuseks on teravam tekst ja sõltuvalt fondi suurusest kas kitsam või laiem teksti pikkus.
See töötab ainult optilist suurust toetavate fontide puhul
Ja optilist suurust toetavad fondid on muutlikud fondid , sealhulgas Roboto Delta, Google'i klassikalise Roboto muutuv versioon. Teine toetav font on Amstelvar. Mõlemat fonti hooldab Type Network.
Isegi kui font on muutuv, peab see funktsioonina optimaalset suurust selgesõnaliselt toetama.
Teine võimalus fontide optiliselt suurust muuta
font-optical-sizingVara on kõige tõhusam viis optiliselt suurus font, mis seda toetab. Teine võimalus on kasutada font-variation-settingsatribuuti, mis võimaldab teil kontrollida optilist suurust opsz, mis on seda toetavate muutuvate fontide optilise suuruse märksõna.
Pange tähele, et kasutamise korral font-variation-settingspeate määrama tähe opszvastavalt fondi suurusele, nii et kõik oleks õigesti mõõtkavas.
.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )Süntaks
font-optical-sizing: auto | none;- Esialgne:
auto - Kehtib kõigi elementide kohta
- Päritud: jah
- Arvutatud väärtus: määratud märksõna
- Animatsiooni tüüp: diskreetne
Väärtused
auto: See on vaikeväärtus. See võimaldab brauseritel loetavuse huvides optimeerida teksti erinevas suuruses.none: See takistab brausereid teksti muutmast.
Vara on nõus ka globaalse märksõna väärtused, sealhulgas inherit, initialja unset.
Demo
Brauseri tugi
| IE | Edge | Firefox | Chrome | Safari | Ooper |
|---|---|---|---|---|---|
| Ei | 17+ | 62+ | 79+ | 11+ | 66+ |
| Android Chrome | Android Firefox | Androidi brauser | iOS-i Safari | Opera Mini |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | Kõik |
Lisalugemist
- CSS-fondide moodul 4. tase (toimetaja mustand)
- MDN dokumentatsioon
- Muutuvad fondid: optiline suurus, kohandatud teljed ja muud kurioosumid (tundlik veebitüpograafia)