Skriftsyntese - CSS-tricks

Anonim

Den font-systhesisejendom i CSS giver instruktioner til, hvordan man håndterer skrifttype fed og kursiv karakter, når den angivne browser font-familyikke omfatter dem.

Lad os tage Lato fra Google Fonts som et eksempel. Der står, at der er 10 forskellige varianter af skrifttypen.

Hver af disse skrifttypevarianter er teknisk en anden skrifttypefil. Hvis vi vil bruge bestemte vægte og stilarter, vil vi linke disse filer op, så browseren har noget at indlæse.

Denne sætning kræver normalt fire forskellige skrifttypefiler.

Men ikke alle skrifttyper inkluderer filer til håndtering af vægt og stil. I disse tilfælde “syntetiserer” browseren selve udseendet. Browseren gør det bedste, men faux fed og stil gør undertiden tekst mindre læselig; det vil sige mindre læselig end en virkelig designet version. I de mildeste tilfælde ser vi muligvis tegn, der overlapper hinanden. I mere alvorlige tilfælde er teksten helt ulæselige eller kan endda ændre betydningen - som det kunne ske med sprog som kinesisk, japansk, koreansk og andre logografiske scripts.

Det er her, der font-synthesiskommer ind. Det styrer, hvilke skrifttyper browseren har lov til at syntetisere.

Syntaks

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

På almindelig engelsk font-synthesisaccepterer dette:

  • en værdi af none
  • enten weightellerstyle
  • både weightogstyle

Det er værd at bemærke, at font-synthesisdet betragtes som en stenografisk ejendom. Ifølge spec er det en kombination af font-synthesis-weightog font-synthesis-stylehvor begge accepterer værdier af autoeller none. Da det er muligt at få den samme effekt ved hjælp af stenografi, er det sandsynligvis den bedste vej at gå.

Værdier

  • none: Hverken fed eller skrå må syntetiseres
  • weight: Fed kan syntetiseres af browseren
  • style: Skråt kan syntetiseres af browseren
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 */

Anvendelse

font-synthesiskan bruges med alle elementer, inklusive ::first-letterog ::first-linepseudo-elementer.

Der kan være tilfælde, hvor det ikke giver mening, at browseren ikke kan syntetisere fed og skråt på et helt sprog, fordi den ene kan skjule tegn. Her er et eksempel trukket fra spec, der deaktiverer syntetiserede fed og skrå skrifttyper, der indeholder arabiske tegn:

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

Demo

Browsersupport

I skrivende stund rapporterer caniuse 20,21% global dækning for font-synthesisejendommen.

Desktop

IE Edge Firefox Chrome Safari Opera
Ingen Ingen 34+ Ingen 9+ Ingen

Mobil

iOS Safari Opera Mini Android-browser Chrome til Android Firefox til Android
9+ Alle Ingen Ingen 68

Vil du bruge font-synthesisi e-mail? Campaign Monitor rapporterer, at den understøttes af følgende klienter:

  • Apple Mail 10+
  • Outlook til Mac
  • AOL Alto iOS-app
  • iOS Mail 10+
  • spurv
  • G Suite
  • Gmail
  • Google Indbakke

Mere information

  • CSS-skrifttyper Modul niveau 4 Specifikation
  • “CSS3 test: font-synthesis“ af Eric Meyer
  • “Sådan kursiveres tekst” af Chris Coyier