Optická velikost písma - Triky CSS

Anonim

Vlastnost font-optical-sizingCSS 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-sizingpokusí 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-sizingVlastnost je nejúčinnější způsob, jak opticky velikosti písmo, které podporuje. Dalším způsobem je použití font-variation-settingsvlastnosti, 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-settingsvyžaduje, abyste nastavili opszv 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, initiala 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
Zdroj: caniuse

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)