Kirjasinsynteesi - CSS-temppuja

Anonim

font-systhesisOmaisuus CSS antaa selaimen ohjeet kuinka käsitellä fontin tummennettu ja kursivoitu luonne, kun määritetty font-familyei sisällä niitä.

Otetaan esimerkkinä Lato Google Fontsista. Siinä sanotaan, että fontissa on 10 erilaista muunnosta.

Jokainen näistä fonttimuunnelmista on teknisesti erilainen fonttitiedosto. Jos haluamme käyttää tiettyjä painoja ja tyylejä, linkitämme nämä tiedostot, jotta selaimella on jotain ladattavaa.

Tämä lause vaatii normaalisti neljä erilaista kirjasintiedostoa.

Mutta kaikki fontit eivät sisällä tiedostoja painon ja tyylin käsittelemiseksi. Tällöin selain "syntetisoi" itse ulkonäön. Selain tekee parhaansa, mutta faux-taivutus ja tyyli tekevät joskus tekstistä vähemmän luettavaa; eli vähemmän luettavissa kuin todella suunniteltu versio. Pienimmissäkin tapauksissa hahmot saattavat näkyä päällekkäin. Vakavammissa tapauksissa teksti on täysin lukukelvoton tai saattaa jopa muuttaa merkitystä - kuten voi käydä kielten, japanin, korean ja muiden logografisten komentosarjojen kaltaisilla kielillä.

Sieltä font-synthesistulee sisään. Se ohjaa, mitä kirjasimia selain saa syntetisoida.

Syntaksi

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

Selkeällä englannilla tämä tarkoittaa, että font-synthesisse hyväksyy:

  • arvo none
  • joko weighttaistyle
  • molemmat weightjastyle

On syytä huomata, että font-synthesissitä pidetään lyhytomaisuutena. Spesifikaation mukaan se on yhdistelmä font-synthesis-weightja font-synthesis-stylemissä molemmat hyväksyvät autotai none. Koska on mahdollista saada sama vaikutus käyttämällä lyhentettä, se on luultavasti paras tapa edetä.

Arvot

  • none: Lihavoitua tai vinoa ei voida syntetisoida
  • weight: Selain voi syntetisoida lihavoidun
  • style: Selain voi syntetisoida vinosti
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 */

Käyttö

font-synthesisvoidaan käyttää kaikkien elementtien kanssa, mukaan lukien ::first-letterja ::first-linepseudoelementit.

Joissakin tapauksissa on järkevää estää selainta syntetisoimasta lihavoitua ja viistoa koko kielellä, koska jompikumpi niistä voi hämärtää merkkejä. Tässä esimerkki, joka on vedetty spesifikaatiosta, joka poistaa syntetisoidut lihavoidut ja viistot kirjasinpinnat, jotka sisältävät arabialaisia ​​merkkejä:

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

Demo

Selaimen tuki

Kirjoitushetkellä caniuse raportoi font-synthesiskiinteistön maailmanlaajuisen kattavuuden 20,21% .

Työpöytä

IE Reuna Firefox Kromi Safari Ooppera
Ei Ei 34+ Ei 9+ Ei

Matkapuhelin

iOS Safari ooppera Mini Android-selain Chrome Androidille Firefox Androidille
9+ Kaikki Ei Ei 68

Haluatko käyttää font-synthesissähköpostissa? Campaign Monitor ilmoittaa, että seuraavat asiakkaat tukevat sitä:

  • Apple Mail 10+
  • Outlook for Mac
  • AOL Alto iOS -sovellus
  • iOS Mail 10+
  • varpunen
  • G Suite
  • Gmail
  • Google-postilaatikko

Lisää tietoa

  • CSS-fonttien moduulin tason 4 määrittely
  • "CSS3-testi: font-synthesis" Eric Meyer
  • Chris Coyierin "Kuinka kursivoida teksti"