Vlastnost font-optical-sizing
CSS umožňuje prohlížeči upravit obrys glyfů písma, aby byly čitelnější při různých velikostech. Například menší text může mít silnější obrys, aby se zvýšil jeho kontrast. Na druhé straně může větší text obsahovat něco „delikátnějšího“, abych citoval specifikaci.
.element ( font-optical-sizing: none; )
Glyfy mají obrysy?
Dělají! Ve skutečnosti je mají všechny glyfy a jejich velikost se mění podle velikosti písma. Problém je v tom, že super tenký obrys při malé velikosti písma nemusí poskytovat dostatečný kontrast pro nejlepší čitelnost; podobně silnější obrysy u větších velikostí mohou mít příliš velkou váhu a kontrast. font-optical-sizing
pokusí se to napravit tím, že nechá prohlížeč pohrávat si s obrysy, aby lépe četl v různých měřítcích. Výsledkem bude ostřejší text a užší nebo širší délky textu v závislosti na velikosti písma.
To funguje pouze u písem, která podporují optické dimenzování
A písma, která podporují optické dimenzování, jsou variabilní písma , včetně Roboto Delta, variabilní verze klasického robota Google. Další podpůrné písmo je Amstelvar. Obě písma jsou udržována pomocí Type Network.
I když je písmo proměnlivé, musí jako vlastnost výslovně podporovat optické dimenzování.
Další způsob, jak opticky upravit velikost písma
font-optical-sizing
Vlastnost je nejúčinnější způsob, jak opticky velikosti písmo, které podporuje. Dalším způsobem je použití font-variation-settings
vlastnosti, která umožňuje ovládat optické dimenzování pomocí opsz
, což je klíčové slovo pro optické dimenzování u proměnných písem, která to podporují.
Všimněte si, že použití font-variation-settings
vyžaduje, abyste nastavili opsz
v souladu s velikostí písma, aby bylo vše správně škálováno.
.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )
Syntax
font-optical-sizing: auto | none;
- Počáteční:
auto
- Platí pro: všechny prvky
- Zděděno: ano
- Vypočítaná hodnota: zadané klíčové slovo
- Typ animace: diskrétní
Hodnoty
auto
: Toto je výchozí hodnota. Umožňuje prohlížečům optimalizovat text v různých velikostech písma kvůli čitelnosti.none
: Toto zabrání prohlížečům v úpravě textu.
Vlastnost také přijímá globální hodnoty klíčových slov, včetně inherit
, initial
a unset
.
Ukázka
Podpora prohlížeče
TJ | Okraj | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
Ne | 17+ | 62+ | 79+ | 11+ | 66+ |
Android Chrome | Android Firefox | Prohlížeč Android | iOS Safari | Opera Mini |
---|---|---|---|---|
85+ | 79+ | 81+ | 11+ | Všechno |
Další čtení
- CSS Fonts Module Level 4 (editor's draft)
- Dokumentace MDN
- Variabilní písma: optická velikost, vlastní osy a další kuriozity (responzivní webová typografie)