Font-syntese - CSS-triks

Anonim

Den font-systhesiseiendom i CSS gir nettleser instruksjoner for hvordan du skal håndtere skrift uthevet og kursiv karakter når den spesifiserte font-familyikke inkluderer dem.

La oss ta Lato fra Google Fonts som et eksempel. Det står at det er 10 forskjellige varianter av skriften.

Hver av disse skriftvariasjonene er teknisk en annen fontfil. Hvis vi vil bruke visse vekter og stiler, vil vi koble disse filene opp slik at nettleseren har noe å laste inn.

Denne setningen vil normalt kreve fire forskjellige fontfiler.

Men ikke alle skriftene inkluderer filer for håndtering av vekt og stil. I slike tilfeller vil nettleseren "syntetisere" selve utseendet. Nettleseren gjør så godt det kan, men faux fet skrift og stil gjør tekst noen ganger mindre leselig; det vil si mindre leselig enn en virkelig designet versjon. I de mildeste tilfellene kan det hende at tegn overlapper hverandre. I mer alvorlige tilfeller er teksten helt uleselig eller kan til og med endre betydningen - slik det kan skje med språk som kinesisk, japansk, koreansk og andre logografiske skript.

Det er der det font-synthesiskommer inn. Den styrer hvilke skrifttyper nettleseren har lov til å syntetisere.

Syntaks

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

På vanlig engelsk font-synthesisaksepterer dette:

  • en verdi av none
  • enten weightellerstyle
  • både weightogstyle

Det er verdt å merke seg at font-synthesisdet regnes som en stenografisk eiendom. I følge spesifikasjonen er det en kombinasjon av font-synthesis-weightog font-synthesis-stylehvor begge aksepterer verdier av autoeller none. Siden det er mulig å få den samme effekten ved å bruke stenografi, er det sannsynligvis den beste måten å gå.

Verdier

  • none: Verken fet eller skrå kan syntetiseres
  • weight: Fet kan syntetiseres av nettleseren
  • style: Skrå kan syntetiseres av nettleseren
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 */

Bruk

font-synthesiskan brukes med alle elementer, inkludert ::first-letterog ::first-linepseudo-elementene.

Det kan være tilfeller der det ikke er fornuftig å ikke tillate at nettleseren syntetiserer fet og skrå på et helt språk, fordi en kan skjule tegn. Her er et eksempel hentet fra spesifikasjonen som deaktiverer syntetiserte fet og skrå skriftflater som inneholder arabiske tegn:

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

Demo

Nettleserstøtte

I skrivende stund rapporterer caniuse 20,21% global dekning for font-synthesiseiendommen.

Desktop

DVS Kant Firefox Chrome Safari Opera
Nei Nei 34+ Nei 9+ Nei

Mobil

iOS Safari Opera Mini Android-nettleser Chrome for Android Firefox for Android
9+ Alle Nei Nei 68

Vil du bruke font-synthesisi e-post? Campaign Monitor rapporterer at den støttes av følgende klienter:

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

Mer informasjon

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