Proprietatea font-optical-sizingCSS permite browserului să ajusteze conturul glifelor fontului pentru a le face mai lizibile la diferite dimensiuni. De exemplu, textul mai mic poate obține un contur mai gros pentru a crește contrastul. Pe de altă parte, textul mai mare poate obține ceva mai „delicat” pentru a cita specificația.
.element ( font-optical-sizing: none; )Glifele au contururi?
Ei fac! De fapt, toate glifele le au și se scalează cu dimensiunea fontului. Problema este că un contur foarte subțire la o dimensiune mică a fontului poate să nu ofere suficient contrast pentru cea mai bună lizibilitate; în mod similar, contururile mai groase la dimensiuni mai mari pot avea prea multă greutate și contrast. font-optical-sizingîncearcă să corecteze acest lucru, permițând browserului să ceară conturul, astfel încât acesta să citească mai bine la diferite scări. Rezultatul va fi un text mai clar și lungimi de text mai înguste sau mai largi, în funcție de dimensiunea fontului.
Acest lucru funcționează numai pe fonturi care acceptă dimensionarea optică
Iar fonturile care acceptă dimensionarea optică sunt fonturi variabile , inclusiv Roboto Delta, o versiune variabilă a clasicului Roboto de la Google. Un alt font de sprijin este Amstelvar. Ambele fonturi sunt întreținute de Type Network.
Chiar dacă un font este variabil, acesta trebuie să accepte în mod explicit dimensionarea optică ca o caracteristică.
Un alt mod de a dimensiona optic fonturile
font-optical-sizingProprietatea este cel mai eficient mod de a dimensiunea optic un font pe care o sprijină. O altă modalitate este de a utiliza font-variation-settingsproprietatea, care vă permite să controlați dimensionarea optică cu opsz, care este cuvântul cheie pentru dimensionarea optică pe fonturi variabile care o acceptă.
Rețineți că utilizarea este font-variation-settingsnecesară pentru a seta opszîn funcție de dimensiunea fontului, astfel încât totul să se potrivească corect.
.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )Sintaxă
font-optical-sizing: auto | none;- Iniţială:
auto - Se aplică tuturor elementelor
- Moștenit: da
- Valoare calculată: cuvânt cheie specificat
- Tipul de animație: discret
Valori
auto: Aceasta este valoarea implicită. Permite browserelor să optimizeze textul la diferite dimensiuni de font pentru lizibilitate.none: Aceasta împiedică browserele să modifice textul.
Proprietatea acceptă, de asemenea, valori globale ale cuvintelor cheie, inclusiv inherit, initialși unset.
Demo
Suport pentru browser
| IE | Margine | Firefox | Crom | Safari | Operă |
|---|---|---|---|---|---|
| Nu | Peste 17 ani | 62+ | Peste 79 de ani | 11+ | 66+ |
| Android Chrome | Android Firefox | Browser Android | Safari iOS | Opera mini |
|---|---|---|---|---|
| Peste 85 de ani | Peste 79 de ani | Peste 81 de ani | 11+ | Toate |
Lecturi suplimentare
- CSS Fonts Module Nivelul 4 (Proiectul editorului)
- Documentația MDN
- Fonturi variabile: dimensiune optică, axe personalizate și alte curiozități (tipografie web receptivă)