font-optical-sizingCSS īpašums ļauj pārlūku pielāgot kontūras fontu glyphs lai padarītu tos salasāms dažādos izmēros. Piemēram, mazāks teksts var iegūt biezāku kontūru, lai palielinātu tā kontrastu. No otras puses, lielāks teksts var iegūt kaut ko “delikātāku”, lai citētu specifikāciju.
.element ( font-optical-sizing: none; )Glifēm ir kontūras?
Viņi dara! Faktiski visos glifos tie ir, un tie mērogojas atbilstoši fonta lielumam. Problēma ir tā, ka ļoti plānas kontūras ar mazu burtu lielumu var nenodrošināt pietiekamu kontrastu, lai nodrošinātu vislabāko salasāmību; tāpat biezākiem kontūriem lielākos izmēros var būt pārāk daudz svara un kontrasta. font-optical-sizingmēģina to izlabot, ļaujot pārlūkprogrammai sagrozīties ar kontūru, lai tā labāk lasītu dažādos mērogos. Rezultāts būs īsāks teksts un šaurāks vai platāks teksta garums atkarībā no fonta lieluma.
Tas darbojas tikai uz fontiem, kas atbalsta optisko izmēru noteikšanu
Fonti, kas atbalsta optisko izmēru noteikšanu, ir mainīgi fonti , tostarp Roboto Delta, mainīgā Google klasiskā Roboto versija. Vēl viens atbalstošais fonts ir Amstelvar. Abus fontus uztur Type Network.
Pat ja fonts ir mainīgs, tam kā funkcijai skaidri jāatbalsta optiskā lieluma noteikšana.
Vēl viens veids, kā optiski izmērot fontus
font-optical-sizingĪpašums ir visefektīvākais veids, lai optiski izmēra fontu, kas to atbalsta. Vēl viens veids ir izmantot font-variation-settingsrekvizītu, kas ļauj kontrolēt optisko lielumu opsz, kas ir atslēgvārds optiskai lieluma noteikšanai mainīgajos fontos, kas to atbalsta.
Ņemiet vērā, ka, lietojot, font-variation-settingsjums ir jāiestata opszatbilstoši fonta lielumam, lai viss tiktu pareizi mērogots.
.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )Sintakse
font-optical-sizing: auto | none;- Sākotnējais:
auto - Attiecas uz: visiem elementiem
- Mantots: jā
- Aprēķinātā vērtība: norādītais atslēgvārds
- Animācijas veids: diskrēts
Vērtības
auto: Šī ir noklusējuma vērtība. Tas ļauj pārlūkprogrammām lasāmības labad optimizēt tekstu dažādos burtu izmēros.none: Tas neļauj pārlūkprogrammām mainīt tekstu.
Īpašums pieņem arī globālos atslēgvārdu vērtības, tai skaitā inherit, initialun unset.
Demonstrācija
Pārlūkprogrammas atbalsts
| IE | Mala | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Nē | 17+ | 62+ | 79+ | 11+ | 66+ |
| Android Chrome | Android Firefox | Android pārlūks | iOS Safari | Opera Mini |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | Viss |
Turpmāka lasīšana
- CSS fontu moduļa 4. līmenis (redaktora melnraksts)
- MDN dokumentācija
- Mainīgi fonti: optiskais izmērs, pielāgotās asis un citas kuriozas (atsaucīga tīmekļa tipogrāfija)