Sinteza fonta - CSS-trikovi

Anonim

font-systhesisNekretnina u CSS daje upute za preglednik za kako se nositi fonta označeno masnim i kurzivom lik kad određeno font-familyih ne uključuju.

Uzmimo za primjer Lato iz Google Fontova. Kaže da postoji 10 različitih varijacija fonta.

Svaka od tih varijacija fonta tehnički je drugačija datoteka fonta. Ako želimo koristiti određene težine i stilove, povezali bismo te datoteke kako bi preglednik imao što učitati.

Ova rečenica obično zahtijeva četiri različite datoteke s fontovima.

Ali, ne uključuju svi fontovi datoteke za rukovanje težinom i stilom. U tim će slučajevima preglednik sam "sintetizirati" izgled. Preglednik čini najbolje što može, ali pogrešno podebljavanje i stil ponekad čine tekst manje čitljivim; odnosno manje čitljiva od istinski dizajnirane verzije. U najblažim slučajevima možemo vidjeti preklapanje znakova. U težim slučajevima tekst je potpuno nečitljiv ili čak može promijeniti značenje - kao što bi se moglo dogoditi s jezicima poput kineskog, japanskog, korejskog i drugih logografskih pisama.

Tu font-synthesisdolazi. Kontrolira koje slova preglednik smije sintetizirati.

Sintaksa

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

Jednostavno na engleskom, ovo znači font-synthesisda prihvaćate:

  • vrijednost od none
  • bilo weightilistyle
  • oboje weightistyle

Vrijedno je napomenuti da font-synthesisse smatra stenografskim svojstvom. Prema specifikaciji, to je kombinacija font-synthesis-weighti font-synthesis-stylegdje obje prihvaćaju vrijednosti autoili none. Budući da je moguće dobiti isti efekt pomoću stenografije, to je vjerojatno najbolji način.

Vrijednosti

  • none: Ne smije se sintetizirati ni podebljano ni koso
  • weight: Preglednik može sintetizirati podebljano
  • style: Preglednik može sintetizirati koso
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 */

Upotreba

font-synthesismože se koristiti sa svim elementima, uključujući ::first-letteri ::first-linepseudo-elemente.

Možda postoje slučajevi kada ne dopuštanje pregledniku da sintetizira podebljano i koso na cijelom jeziku ima smisla jer bilo koji od njih može prikriti znakove. Evo primjera izvučenog iz specifikacije koji onemogućava sintetizirana podebljana i kosa lica fontova koja sadrže arapske znakove:

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

Demo

Podrška preglednika

U vrijeme pisanja ovog članka, caniuse izvještava o 20,21% globalne pokrivenosti font-synthesisnekretnine.

Radna površina

IE Rub Firefox Krom Safari Opera
Ne Ne 34+ Ne 9+ Ne

Mobilni

iOS Safari Opera Mini Android preglednik Chrome za Android Firefox za Android
9+ svi Ne Ne 68

Želite koristiti font-synthesisu e-pošti? Campaign Monitor izvještava da ga podržavaju sljedeći klijenti:

  • Apple Mail 10+
  • Outlook za Mac
  • AOL Alto iOS aplikacija
  • iOS Mail 10+
  • Vrabac
  • G Suite
  • Gmail
  • Google Inbox

Više informacija

  • Specifikacija modula CSS fontova razine 4
  • „CSS3 test: font-synthesis“ Eric Meyer
  • "Kako kurzirati tekst" Chrisa Coyiera