Vlastnosť font-optical-sizingCSS umožňuje prehliadaču upraviť obrys glyfov písma tak, aby boli čitateľnejšie pri rôznych veľkostiach. Napríklad menší text môže mať hrubší obrys, aby sa zvýšil jeho kontrast. Na druhú stranu, väčší text môže obsahovať niečo, čo je „jemnejšie“, aby bolo možné citovať špecifikáciu.
.element ( font-optical-sizing: none; )Glyfy majú obrysy?
Oni robia! V skutočnosti ich majú všetky glyfy a ich veľkosť sa zväčšuje podľa veľkosti písma. Problém je v tom, že super tenký obrys pri malej veľkosti písma nemusí poskytovať dostatočný kontrast pre najlepšiu čitateľnosť; podobne môžu mať hrubšie obrysy pri väčších veľkostiach príliš veľkú váhu a kontrast. font-optical-sizingsa to pokúša napraviť povolením prehľadávača manipulovať s obrysom, aby lepšie čítal v rôznych mierkach. Výsledkom bude ostrejší text a užšie alebo širšie dĺžky textu v závislosti od veľkosti písma.
Funguje to iba na písma, ktoré podporujú optické nastavenie veľkosti
A písma, ktoré podporujú optické dimenzovanie, sú variabilné písma , vrátane Roboto Delta, variabilnej verzie klasického robota od spoločnosti Google. Ďalším podporným písmom je Amstelvar. Obidve písma udržuje Type Network.
Aj keď je písmo variabilné, musí ako vlastnosť výslovne podporovať optické prispôsobenie veľkosti.
Ďalším spôsobom, ako opticky upraviť veľkosť písma
Táto font-optical-sizingvlastnosť je najefektívnejším spôsobom, ako opticky zmeniť veľkosť písma, ktoré ho podporuje. Ďalším spôsobom je použitie font-variation-settingsvlastnosti, ktorá vám umožní ovládať optické dimenzovanie pomocou opsz, čo je kľúčové slovo pre optické dimenzovanie na variabilných písmach, ktoré ho podporujú.
Upozorňujeme, že pri používaní aplikácie je font-variation-settingspotrebné nastaviť opszveľkosť písma, aby bolo všetko správne škálované.
.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )Syntax
font-optical-sizing: auto | none;- Počiatočné:
auto - Vzťahuje sa na: všetky prvky
- Zdedené: áno
- Vypočítaná hodnota: zadané kľúčové slovo
- Typ animácie: diskrétna
Hodnoty
auto: Toto je predvolená hodnota. Umožňuje prehliadačom optimalizovať text pri rôznych veľkostiach písma kvôli čitateľnosti.none: Toto zabráni prehliadačom upravovať text.
Vlastnosť tiež prijíma globálny hodnoty kľúčových slov, vrátane inherit, initiala unset.
Ukážka
Podpora prehliadača
| IE | Hrana | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Nie | 17+ | 62+ | 79+ | 11+ | 66+ |
| Android Chrome | Android Firefox | Prehliadač Android | iOS Safari | Opera Mini |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | Všetky |
Ďalšie čítanie
- Modul CSS Fonts, úroveň 4 (návrh redaktora)
- Dokumentácia MDN
- Variabilné písma: optická veľkosť, vlastné osi a ďalšie kuriozity (responzívna webová typografia)