Syntéza písem - Triky CSS

Anonim

font-systhesisNemovitost v CSS dává pokyny prohlížeče pro to, jak zacházet font tučný a kurzívou charakter, když zadaný font-familyneobsahuje jim.

Vezměme si jako příklad Lata z Google Fonts. Říká se, že existuje 10 různých variant písma.

Každá z těchto variant písma je technicky jiný soubor písma. Pokud chceme použít určité váhy a styly, propojili bychom tyto soubory, aby měl prohlížeč co načíst.

Tato věta by normálně vyžadovala čtyři různé soubory písem.

Ale ne všechna písma obsahují soubory pro manipulaci s váhou a stylem. V takových případech prohlížeč „syntetizuje“ samotný vzhled. Prohlížeč dělá to nejlepší, co umí, ale fauxové tučení a styl někdy činí text méně čitelným; to je méně čitelné než skutečně navržená verze. V nejmírnějších případech můžeme vidět překrývání znaků. V závažnějších případech je text zcela nečitelný nebo dokonce může změnit jeho význam - jak se to může stát u jazyků, jako je čínština, japonština, korejština a další logografické skripty.

To je místo, kde font-synthesispřichází. Řídí, která písma může prohlížeč syntetizovat.

Syntax

.element ( font-synthesis: none | ( weight || style ); )

V jednoduché angličtině to znamená, font-synthesisže přijme:

  • hodnota none
  • buď weightnebostyle
  • jak weightastyle

Stojí za zmínku, že font-synthesisje považována za zkratkovou vlastnost. Podle specifikace je to kombinace font-synthesis-weighta font-synthesis-stylekde oba přijímají hodnoty autonebo none. Jelikož je možné získat stejný efekt pomocí zkratky, je to pravděpodobně nejlepší způsob, jak jít.

Hodnoty

  • none: Tučně ani šikmo nelze syntetizovat
  • weight: Tučné písmo může syntetizovat prohlížeč
  • style: Šikmý může být syntetizován prohlížečem
font-synthesis: none; /* browser will not synthesize any font faces */ font-synthesis: style; /* browser will not synthesize a bold font face */ font-synthesis: weight; /* browser will not synthesize an oblique font face */ font-synthesis: weight style; /* browser will synthesize bold and oblique faces if they are unavailable */

Používání

font-synthesismůže být použita se všemi prvky, včetně ::first-lettera ::first-linepseudo-elementy.

Mohou nastat případy, kdy neumožnění prohlížeče syntetizovat tučně a šikmo v celém jazyce má smysl, protože jeden z nich může zakrývat znaky. Zde je příklad získaný ze specifikace, která zakazuje syntetizované tučně a šikmé tváře písma obsahující arabské znaky:

/* Disables synthetic bolded and obliqued characters in Arabic */ *:lang(ar) ( font-synthesis: none; )

Ukázka

Podpora prohlížeče

V době psaní tohoto článku caniuse hlásí 20,21% globální pokrytí této font-synthesisnemovitosti.

plocha počítače

TJ Okraj Firefox Chrome Safari Opera
Ne Ne 34+ Ne 9+ Ne

mobilní, pohybliví

iOS Safari Opera Mini Prohlížeč Android Chrome pro Android Firefox pro Android
9+ Všechno Ne Ne 68

Chcete použít font-synthesisv e-mailu? Campaign Monitor hlásí, že je podporován následujícími klienty:

  • Apple Mail 10+
  • Outlook pro Mac
  • Aplikace AOL Alto pro iOS
  • iOS Mail 10+
  • Vrabec
  • G Suite
  • Gmail
  • Doručená pošta Google

Více informací

  • Specifikace modulu písem CSS úrovně 4
  • „Test CSS3: font-synthesis“ Erica Meyera
  • „How to Italicize Text“ od Chrisa Coyiera