Font-syntes - CSS-tricks

Anonim

Den font-systhesisegendom i CSS ger webbläsaren instruktioner för hur man hanterar typsnitt fetstil och kursiv karaktär när den angivna font-familyinte omfattar dem.

Låt oss ta Lato från Google Fonts som ett exempel. Det står att det finns tio olika varianter av teckensnittet.

Var och en av dessa typsnittsvarianter är tekniskt en annan typsnittsfil. Om vi ​​vill använda vissa vikter och stilar, länkar vi dessa filer så att webbläsaren har något att ladda.

Denna mening kräver normalt fyra olika teckensnittsfiler.

Men inte alla teckensnitt innehåller filer för hantering av vikt och stil. I sådana fall "syntetiserar" webbläsaren själva utseendet. Webbläsaren gör det bästa den kan, men faux fetstil och stil gör text ibland mindre läsbar; det vill säga mindre läsbar än en verkligt utformad version. I de mildaste fallen kan vi se att tecken överlappar varandra. I mer allvarliga fall är texten helt oläslig eller kan till och med ändra innebörden - vilket kan hända med språk som kinesiska, japanska, koreanska och andra logografiska manus.

Det är där som font-synthesiskommer in. Den styr vilka typsnitt webbläsaren får syntetisera.

Syntax

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

På vanlig engelska font-synthesisaccepterar detta:

  • ett värde av none
  • antingen weightellerstyle
  • både weightochstyle

Det är värt att notera att det font-synthesisanses vara en stenografisk fastighet. Enligt specifikationen är det en kombination av font-synthesis-weightoch font-synthesis-styledär båda accepterar värden på autoeller none. Eftersom det är möjligt att få samma effekt med hjälp av stenografi, är det förmodligen det bästa sättet att gå.

Värden

  • none: Varken fet eller sned får syntetiseras
  • weight: Fet kan syntetiseras av webbläsaren
  • style: Oblique kan syntetiseras av webbläsaren
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 */

Användande

font-synthesiskan användas med alla element, inklusive ::first-letteroch ::first-linepseudo-element.

Det kan finnas fall där det inte är vettigt att inte låta webbläsaren syntetisera fet och sned på ett helt språk eftersom någon kan dölja tecken. Här är ett exempel hämtat från specifikationen som inaktiverar syntetiserade fetstil och sneda teckensnitt som innehåller arabiska tecken:

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

Demo

Webbläsarstöd

I skrivande stund rapporterar caniuse 20,21% global täckning för font-synthesisfastigheten.

Skrivbord

IE Kant Firefox Krom Safari Opera
Nej Nej 34+ Nej 9+ Nej

Mobil

iOS Safari Opera Mini Android-webbläsare Chrome för Android Firefox för Android
9+ Allt Nej Nej 68

Vill du använda font-synthesisi e-post? Campaign Monitor rapporterar att den stöds av följande klienter:

  • Apple Mail 10+
  • Outlook för Mac
  • AOL Alto iOS-app
  • iOS Mail 10+
  • Sparv
  • G Suite
  • Gmail
  • Googles inkorg

Mer information

  • CSS-typsnitt Modul Nivå 4 Specifikation
  • “CSS3-test: font-synthesis“ av Eric Meyer
  • “How to Italicize Text” av Chris Coyier