A font-optical-sizingCSS tulajdonság lehetővé teszi, hogy a böngésző módosítsa a betűjelek körvonalait, hogy azok különböző méretben olvashatóbbak legyenek. Például a kisebb szöveg vastagabb körvonalat kaphat a kontraszt növelése érdekében. A másik oldalon a nagyobb szöveg valami „kényesebbet” kaphat a specifikáció idézésére.
.element ( font-optical-sizing: none; )A karakterjeleknek vannak körvonalai?
Ők csinálják! Valójában minden karakterjel rendelkezik, és a betű méretével skálázódik. A probléma az, hogy a szűk vékony körvonal apró betűmérettel nem biztosíthat elég kontrasztot a legjobb olvashatóság érdekében; Hasonlóképpen, a vastagabb körvonalak nagyobb méretnél túl nagy súlyúak és kontrasztúak lehetnek. font-optical-sizingmegkísérli ezt kijavítani azáltal, hogy lehetővé teszi a böngésző számára a vázlat hegedülését, így az jobban elolvassa a különböző méretarányokat. Az eredmény élesebb szöveg lesz, vagy a betűmérettől függően keskenyebb vagy szélesebb szövegrész.
Ez csak az optikai méretezést támogató betűtípusokon működik
Az optikai méretezést támogató betűtípusok pedig változó betűtípusok , beleértve a Roboto Delta-t, amely a Google klasszikus Roboto-jának változó változata. Egy másik támogató betűtípus az Amstelvar. Mindkét betűtípust a Type Network tartja fenn.
Még akkor is, ha a betűkészlet változó, kifejezetten támogatnia kell az optikai méretezést mint szolgáltatást.
A betűtípusok optikai méretének másik módja
A font-optical-sizingtulajdonság a leghatékonyabb módszer az azt támogató betűkészlet optikai méretének meghatározására. Egy másik módszer a font-variation-settingstulajdonság használata , amely lehetővé teszi az optikai méretezés vezérlését opsz, amely az azt támogató változó betűtípusok optikai méretezésének kulcsszava.
Ne feledje, hogy a használatához font-variation-settingsmeg kell adnia opsza betűtípus méretének megfelelően, így minden megfelelően méretezhető.
.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )Szintaxis
font-optical-sizing: auto | none;- A kezdeti:
auto - Alkalmazható: minden elem
- Örökölt: igen
- Számított érték: megadott kulcsszó
- Animáció típusa: diszkrét
Értékek
auto: Ez az alapértelmezett érték. Lehetővé teszi a böngészők számára, hogy az olvashatóság érdekében különböző betűméretekkel optimalizálják a szöveget.none: Ez megakadályozza, hogy a böngészők módosítsák a szöveget.
A tulajdonság globális kulcsszóértékeket is elfogad, beleértve a inherit, initialés unset.
Demó
Böngésző támogatás
| AZAZ | Él | Firefox | Króm | Szafari | Opera |
|---|---|---|---|---|---|
| Nem | 17+ | 62+ | 79+ | 11+ | 66+ |
| Android Chrome | Android Firefox | Android böngésző | iOS Safari | Opera Mini |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | Összes |
További irodalom
- CSS betűtípusok 4. szint modul (a szerkesztő tervezete)
- MDN dokumentáció
- Változó betűtípusok: optikai méret, egyedi tengelyek és egyéb érdekességek (adaptív webes tipográfia)