Met de font-optical-sizingCSS-eigenschap kan de browser de omtrek van lettertypeglyphs aanpassen om ze beter leesbaar te maken bij verschillende grootten. Zo kan kleinere tekst een dikkere omtrek krijgen om het contrast te vergroten. Aan de andere kant kan grotere tekst iets "delicater" krijgen om de specificatie te citeren.
.element ( font-optical-sizing: none; )Glyphs hebben contouren?
Zij doen! In feite hebben alle glyphs ze en worden ze geschaald met de grootte van het lettertype. Het probleem is dat een superdunne omtrek met een kleine lettergrootte mogelijk niet genoeg contrast biedt voor de beste leesbaarheid; Evenzo kunnen dikkere contouren bij grotere formaten te veel gewicht en contrast hebben. font-optical-sizingprobeert dat te corrigeren door de browser met de omtrek te laten spelen zodat deze beter leest op verschillende schalen. Het resultaat is een scherpere tekst en een smallere of bredere tekst, afhankelijk van de lettergrootte.
Dit werkt alleen bij lettertypen die optische grootte ondersteunen
En de lettertypen die optische grootte ondersteunen, zijn variabele lettertypen , waaronder Roboto Delta, een variabele versie van Google's klassieke Roboto. Een ander ondersteunend lettertype is Amstelvar. Beide lettertypen worden onderhouden door Type Network.
Zelfs als een lettertype variabel is, moet het expliciet optische grootte als functie ondersteunen.
Een andere manier om lettertypen optisch te vergroten
De font-optical-sizingeigenschap is de meest efficiënte manier om een lettertype dat dit ondersteunt optisch te vergroten. Een andere manier is om de font-variation-settingseigenschap te gebruiken , waarmee u de optische grootte kunt regelen opsz, wat het sleutelwoord is voor optische grootte op variabele lettertypen die dit ondersteunen.
Houd er rekening mee dat font-variation-settingsu voor het gebruik de opszin overeenstemming met de lettergrootte moet instellen, zodat alles correct wordt geschaald.
.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )Syntaxis
font-optical-sizing: auto | none;- Eerste:
auto - Geldt voor: alle elementen
- Overgenomen: ja
- Berekende waarde: gespecificeerd trefwoord
- Animatietype: discreet
Waarden
auto Hiermee kunnen browsers tekst met verschillende lettergroottes optimaliseren voor leesbaarheid.none
De eigenschap accepteert ook algemene trefwoordwaarden, waaronder inherit, initialen unset.
Demo
Browser-ondersteuning
| D.W.Z | Rand | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Nee | 17+ | 62+ | 79+ | 11+ | 66+ |
| Android Chrome | Android Firefox | Android-browser | iOS Safari | Opera Mini |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | Alle |
Verder lezen
- CSS Fonts Module Level 4 (Editor's Draft)
- MDN-documentatie
- Variabele lettertypen: optische grootte, aangepaste assen en andere curiositeiten (responsieve webtypografie)