Font-süntees - CSS-trikid

Anonim

font-systhesisVara CSS annab brauseri juhised, kuidas font paksus kirjas ja kursiivis iseloomu, kui määratud font-familyei sisalda neid.

Võtame näiteks Google Fontsist pärit Lato. Seal öeldakse, et fondil on 10 erinevat variatsiooni.

Kõik need fondivariatsioonid on tehniliselt erinev fondifail. Kui soovime kasutada teatud kaalu ja stiile, linkime need failid üles, et brauseril oleks midagi laadida.

See lause nõuab tavaliselt nelja erinevat fondifaili.

Kuid kõik fondid ei sisalda kaalu ja stiili käsitlemiseks mõeldud faile. Sellistel juhtudel “sünteesib” brauser välimuse ise. Brauser teeb kõik endast oleneva, kuid kunstlik painutamine ja stiil muudavad teksti mõnikord vähem loetavaks; see on vähem loetav kui tõeliselt kujundatud versioon. Leebematel juhtudel võime märgid kattuda. Raskematel juhtudel on tekst täiesti loetamatu või võib isegi tähendust muuta - nagu võib juhtuda selliste keelte nagu hiina, jaapani, korea ja muude logograafiliste skriptide puhul.

Seal see font-synthesistuleb. See kontrollib, milliseid kirjatüüpe on brauseril lubatud sünteesida.

Süntaks

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

Selges inglise keeles tähendab font-synthesissee järgmist:

  • väärtus none
  • kas weightvõistyle
  • nii weightjastyle

Väärib märkimist, et font-synthesisseda peetakse lühikirjelduseks. Spetsifikatsiooni kohaselt on see kombinatsioon font-synthesis-weightja font-synthesis-stylekus mõlemad aktsepteerivad väärtusi autovõi none. Kuna sama efekti on võimalik saada ka stenogrammi abil, on see ilmselt parim viis.

Väärtused

  • none: Ei saa sünteesida ei rasvast ega viltust
  • weight: Brauser võib sünteesida rasva
  • style: Brauser võib sünteesida kaldu
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 */

Kasutamine

font-synthesisvõib kasutada koos kõigi elementidega, kaasa arvatud ::first-letterja ::first-linepseudoelementidega.

Võib juhtuda, et keelamine brauseril kogu keeles paksude ja kaldus sünteesimisel on mõistlik, sest kumbki võib tähemärki varjata. Siin on näide, mis on võetud spetsifikatsioonist, mis keelab araabia tähemärke sisaldavate rasvaste ja kaldus fontide sünteesimise:

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

Demo

Brauseri tugi

Kirjutamise ajal teatas caniuse, et kogu font-synthesiskinnisvara katab 20,21% .

Töölaud

IE Edge Firefox Chrome Safari Ooper
Ei Ei 34+ Ei 9+ Ei

Mobiilne

iOS-i Safari Opera Mini Androidi brauser Chrome Androidile Firefox Androidile
9+ Kõik Ei Ei 68

Kas soovite font-synthesise- postis kasutada ? Campaign Monitor teatab, et seda toetavad järgmised kliendid:

  • Apple Mail 10+
  • Outlook for Mac
  • AOL Alto iOS-i rakendus
  • iOS Mail 10+
  • Varblane
  • G Suite
  • Gmail
  • Google'i postkast

Rohkem informatsiooni

  • CSS-fondide mooduli 4. taseme spetsifikatsioon
  • „CSS3 test: font-synthesis“ autor Eric Meyer
  • Chris Coyieri „Kuidas teksti kursiivida”