font-optical-sizingCSS svojstvo omogućuje preglednik za prilagodbu obris font simbole kako bi bili čitljiviji na različitim veličinama. Na primjer, manji tekst može dobiti deblji obris kako bi se povećao njegov kontrast. S druge strane, veći tekst može dobiti nešto „osjetljivije“ u navodu specifikacije.
.element ( font-optical-sizing: none; )Glifi imaju obrise?
Oni čine! Zapravo ih imaju svi glifi i oni se prilagođavaju veličini fonta. Problem je u tome što izuzetno tanak obris na maloj veličini fonta možda neće pružiti dovoljan kontrast za najbolju čitljivost; slično, deblji obrisi kod većih veličina mogu imati previše težine i kontrasta. font-optical-sizingpokušava to ispraviti dopuštajući pregledniku da petlja po obrisima kako bi bolje čitao u različitim mjerilima. Rezultat će biti oštriji tekst i uža ili šira duljina teksta, ovisno o veličini fonta.
To radi samo na fontovima koji podržavaju optičko dimenzioniranje
A fontovi koji podržavaju optičko veličinu su promjenjivi fontovi , uključujući Roboto Delta, varijabilnu verziju Googleovog klasičnog Robota. Drugi podržavajući font je Amstelvar. Oba fonta održava Type Network.
Čak i ako je font promjenjiv, on mora izričito podržavati optičko veličinu kao značajku.
Još jedan način za optičku veličinu fontova
font-optical-sizingVlasništvo je najučinkovitiji način za optičko veličine font koji podržava to. Drugi način je korištenje font-variation-settingssvojstva koje vam omogućuje upravljanje optičkim veličinama pomoću opsz, što je ključna riječ za optičko dimenzioniranje na promjenjivim fontovima koji ga podržavaju.
Imajte na umu da korištenje font-variation-settingszahtijeva da podesite opszveličinu fonta tako da se sve pravilno skalira.
.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )Sintaksa
font-optical-sizing: auto | none;- Inicijal:
auto - Odnosi se na: sve elemente
- Naslijeđeno: da
- Izračunata vrijednost: navedena ključna riječ
- Vrsta animacije: diskretna
Vrijednosti
auto: Ovo je zadana vrijednost. Omogućuje preglednicima optimizaciju teksta u različitim veličinama fonta radi čitljivosti.none: Ovo sprječava preglednike da mijenjaju tekst.
Objekt također prihvaća globalne vrijednosti ključne riječi, uključujući inherit, initiali unset.
Demo
Podrška preglednika
| IE | Rub | Firefox | Krom | Safari | Opera |
|---|---|---|---|---|---|
| Ne | 17+ | 62+ | 79+ | 11+ | 66+ |
| Android Chrome | Android Firefox | Android preglednik | iOS Safari | Opera Mini |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | svi |
Daljnje čitanje
- CSS modul fontova razina 4 (urednikov nacrt)
- MDN dokumentacija
- Varijabilni fontovi: optička veličina, prilagođene osi i druge zanimljivosti (prilagodljiva web-tipografija)