Syntéza písma - Triky CSS

Anonim

font-systhesisNehnuteľnosť v CSS dáva pokyny prehliadača pre to, ako zaobchádzať font tučný a kurzívou charakter, keď zadaný font-familyneobsahuje im.

Zoberme si ako príklad Lata z Google Fonts. Hovorí sa, že existuje 10 rôznych variácií písma.

Každá z týchto variácií písma je technicky iný súbor písma. Ak chceme použiť určité váhy a štýly, prepojili by sme tieto súbory, aby mal prehliadač čo načítať.

Táto veta by zvyčajne vyžadovala štyri rôzne súbory písma.

Nie všetky písma však obsahujú súbory na manipuláciu s hmotnosťou a štýlom. V týchto prípadoch prehľadávač „syntetizuje“ samotný vzhľad. Prehliadač robí všetko, čo je v jeho silách, ale faux tučným písmom a štýlom sa text niekedy stáva menej čitateľným; to znamená, že je menej čitateľný ako skutočne navrhnutá verzia. V najmiernejších prípadoch môžeme vidieť, že sa znaky prekrývajú. V závažnejších prípadoch je text úplne nečitateľný alebo dokonca môže zmeniť jeho význam - čo sa môže stať v jazykoch, ako sú čínština, japončina, kórejčina a ďalšie logografické skripty.

To je miesto, kde font-synthesisprichádza. Kontroluje, ktoré písma môže prehliadač syntetizovať.

Syntax

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

V jednoduchej angličtine to znamená font-synthesis:

  • hodnota none
  • buď weightalebostyle
  • obidve weightastyle

Stojí za zmienku, že font-synthesissa považuje za stenografický majetok. Podľa špecifikácií, je to kombinácia font-synthesis-weighta font-synthesis-stylekde obaja prijímať hodnoty autoalebo none. Pretože je možné dosiahnuť rovnaký efekt pomocou skratky, je to asi najlepší spôsob, ako ísť.

Hodnoty

  • none: Nesmie sa syntetizovať hrubé ani šikmé písmo
  • weight: Tučné písmo môže prehľadávač syntetizovať
  • style: Šikmý môže byť syntetizovaný prehľadávačom
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 */

Využitie

font-synthesismôžu byť použité so všetkými prvkami, vrátane ::first-lettera ::first-linepseudoprvkov.

Môžu sa vyskytnúť prípady, keď neumožnenie prehľadávača syntetizovať tučné a šikmé znaky v celom jazyku má zmysel, pretože jeden z nich môže zakrývať znaky. Tu je príklad získaný zo špecifikácie, ktorá zakazuje syntetizované tučné a šikmé tváre písma obsahujúce arabské znaky:

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

Ukážka

Podpora prehliadača

V čase písania tohto článku hlási caniuse 20,21% globálne pokrytie tohto font-synthesismajetku.

Desktop

IE Hrana Firefox Chrome Safari Opera
Nie Nie 34+ Nie 9+ Nie

Mobilné

iOS Safari Opera Mini Prehliadač Android Chrome pre Android Firefox pre Android
9+ Všetky Nie Nie 68

Chcete použiť font-synthesise-mail? Program Campaign Monitor uvádza, že je podporovaný nasledujúcimi klientmi:

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

Viac informácií

  • Špecifikácia modulu CSS Fonts úrovne 4
  • „Test CSS3: font-synthesis“ Erica Meyera
  • „Ako kurzíva písať text“ od Chrisa Coyiera