font-optical-sizingCSS nuosavybė leidžia naršyklę reguliuoti šrifto molio kontūrą, kad jos būtų aiškiai įskaitomi įvairių dydžių. Pavyzdžiui, mažesnis tekstas gali gauti storesnį kontūrą, kad padidėtų jo kontrastas. Kita vertus, didesnis tekstas gali gauti tai, kas yra „subtiliau“, norint cituoti specifikaciją.
.element ( font-optical-sizing: none; )Glifai turi kontūrus?
Jie daro! Tiesą sakant, visi simboliai juos turi ir jie keičiasi pagal šrifto dydį. Problema ta, kad itin plonas, mažo šrifto dydžio kontūras gali nesuteikti pakankamai kontrasto, kad būtų geriau įskaitomas; Panašiai didesnių dydžių storesni kontūrai gali turėti per daug svorio ir kontrasto. font-optical-sizingbando tai ištaisyti leisdamas naršyklei mąstyti su kontūrais, kad ji geriau skaitytų skirtingais mastais. Rezultatas bus aiškesnis tekstas ir siauresnis arba platesnis teksto ilgis, atsižvelgiant į šrifto dydį.
Tai veikia tik šriftuose, kurie palaiko optinį dydį
Šriftai, palaikantys optinį dydį, yra kintantys šriftai , įskaitant „Roboto Delta“, kintamą „Google“ klasikinio „Roboto“ versiją. Kitas pagalbinis šriftas yra „Amstelvar“. Abu šriftus prižiūri „Type Network“.
Net jei šriftas yra kintamas, jis turi aiškiai palaikyti optinį dydį kaip funkciją.
Kitas būdas optiškai padidinti šriftus
font-optical-sizingTurtas yra efektyviausias būdas optiškai dydžio šriftą, kuris jį palaiko. Kitas būdas yra naudoti font-variation-settingsypatybę, leidžiančią valdyti optinį dydį opsz, kuris yra raktinis žodis, leidžiantis pasirinkti optinius dydžius kintamuose šriftuose, kurie jį palaiko.
Atminkite, kad naudojant font-variation-settingsreikia nustatyti opszšrifto dydį, kad viskas būtų tinkamai keičiama.
.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )Sintaksė
font-optical-sizing: auto | none;- Pradinis:
auto - Taikoma: visiems elementams
- Paveldima: taip
- Apskaičiuota vertė: nurodytas raktinis žodis
- Animacijos tipas: diskretiškas
Vertybės
auto: Tai yra numatytoji reikšmė. Tai leidžia naršyklėms optimizuoti skirtingo šrifto dydžio tekstą, kad būtų įskaitomas.none: Tai neleidžia naršyklėms modifikuoti teksto.
Šiame viešbutyje taip pat priima pasaulines raktažodžių vertybes, įskaitant inherit, initialir unset.
Demonstracija
Naršyklės palaikymas
| T.Y | Briauna | „Firefox“ | „Chrome“ | „Safari“ | Opera |
|---|---|---|---|---|---|
| Ne | 17+ | 62+ | 79+ | 11+ | 66+ |
| „Android Chrome“ | „Android Firefox“ | „Android“ naršyklė | „iOS Safari“ | „Opera Mini“ |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | Viskas |
Papildoma literatūra
- 4 lygio CSS šriftų modulis (redaktoriaus juodraštis)
- MDN dokumentacija
- Kintamieji šriftai: optinis dydis, pasirinktinės ašys ir kiti įdomumai (interaktyvi žiniatinklio tipografija)