Šrifto sintezė - CSS-gudrybės

Anonim

font-systhesisCSS nuosavybė suteikia naršyklės instrukcijas, kaip elgtis šrifto paryškinti ir kursyvu charakterį, kai nurodyta font-familyneapima juos.

Paimkime pavyzdžiu Lato iš „Google Fonts“. Jame sakoma, kad yra 10 skirtingų šrifto variantų.

Kiekvienas iš šių šriftų variantų yra techniškai skirtingas šrifto failas. Jei norime naudoti tam tikrus svorius ir stilius, susiesime tuos failus, kad naršyklėje būtų ką įkelti.

Šiam sakiniui paprastai reikėtų keturių skirtingų šriftų failų.

Tačiau ne visuose šriftuose yra failų, skirtų svoriui ir stiliui tvarkyti. Tais atvejais naršyklė „sintetins“ pačią išvaizdą. Naršyklė daro viską, ką gali, tačiau dirbtinis lankstymas ir stilius kartais daro tekstą mažiau įskaitomą; tai yra mažiau įskaitoma nei tikrai sukurta versija. Lengviausiais atvejais galime pastebėti, kad veikėjai sutampa. Sunkesniais atvejais tekstas yra visiškai neskaitomas arba gali net pakeisti prasmę - kaip gali nutikti kalbomis, tokiomis kaip kinų, japonų, korėjiečių ir kiti logografiniai scenarijai.

Štai kur jis font-synthesisateina. Jis kontroliuoja, kokius šriftus leidžiama sintezuoti naršyklei.

Sintaksė

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

Kalbant paprastai, tai reiškia, font-synthesiskad priimsite:

  • vertė none
  • arba weightarbastyle
  • tiek weightirstyle

Verta paminėti, kad font-synthesistai laikoma trumpiniu. Pagal specifikaciją, tai yra derinys font-synthesis-weightir font-synthesis-stylekai abu priima autoarba none. Kadangi tą patį efektą įmanoma gauti naudojant stenografiją, tai tikriausiai yra geriausias būdas.

Vertybės

  • none: Negalima sintetinti nei drąsios, nei įstrižos
  • weight: Pusjuodį gali susintetinti naršyklė
  • style: Naršyklė gali susintetinti įstrižą
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 */

Naudojimas

font-synthesisgali būti naudojami su visais elementais, įskaitant ::first-letterir ::first-linepseudoelementus.

Gali būti atvejų, kai neleidžiama naršyklei sintetinti drąsių ir įstrižų kalbų visoje kalboje, nes tai gali užgožti simbolius. Štai pavyzdys, paimtas iš specifikacijos, kuri neleidžia susintetinti paryškintų ir įstrižų šriftų veidų, kuriuose yra arabų simbolių:

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

Demonstracija

Naršyklės palaikymas

Rašymo metu „caniuse“ pranešė apie 20,21% viso font-synthesisturto aprėpties .

Darbalaukis

T.Y Briauna „Firefox“ „Chrome“ „Safari“ Opera
Ne Ne 34+ Ne 9+ Ne

Mobilusis

„iOS Safari“ „Opera Mini“ „Android“ naršyklė „Android“ skirta „Chrome“ „Firefox“, skirta „Android“
9+ Viskas Ne Ne 68

Norite naudoti font-synthesisel. Paštu? „Campaign Monitor“ praneša, kad jį palaiko šie klientai:

  • „Apple Mail 10+“
  • „Outlook“, skirta „Mac“
  • „AOL Alto“ „iOS“ programa
  • „iOS Mail 10+“
  • Žvirblis
  • „G Suite“
  • „Gmail“
  • „Google“ gautieji

Daugiau informacijos

  • CSS šriftų modulio 4 lygio specifikacija
  • „CSS3 testas“: font-synthesisEricas Meyeris
  • Chriso Coyiero „Kaip kursyvuoti tekstą“