Betűtípus-szintézis - CSS-trükkök

Anonim

A font-systhesisCSS tulajdonság a böngészőnek utasításokat ad a félkövér és dőlt betűs karakterek kezeléséhez, ha a megadottak font-familynem tartalmazzák azokat.

Vegyük példának Lato-t a Google Fonts-ból. Azt mondja, hogy a betűkészletnek 10 különböző változata van.

E betűváltozatok mindegyike technikailag különböző betűtípusfájl. Ha bizonyos súlyokat és stílusokat akarunk használni, akkor összekapcsolnánk ezeket a fájlokat, hogy a böngészőnek legyen mit betöltenie.

Ehhez a mondathoz általában négy különböző betűtípusfájlra lenne szükség.

De nem minden betűtípus tartalmaz fájlokat a súly és stílus kezeléséhez. Ezekben az esetekben a böngésző „szintetizálja” magát a megjelenést. A böngésző a lehető legjobban cselekszik, de a műhajlítás és a stílus néha kevésbé olvashatóvá teszi a szöveget; vagyis kevésbé olvasható, mint egy valóban megtervezett változat. A legenyhébb esetekben előfordulhat, hogy a karakterek átfedik egymást. Súlyosabb esetekben a szöveg teljesen olvashatatlan, vagy akár megváltoztathatja a jelentését - mint például a kínai, japán, koreai és más logográfiai szkriptek esetében.

Ott font-synthesisjön be. Meghatározza, hogy a böngésző mely betűtípusokat tudja szintetizálni.

Szintaxis

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

Egyszerű angol nyelven ez azt jelenti, font-synthesishogy elfogadja:

  • értéke none
  • vagy weightvagystyle
  • mindkét weightésstyle

Érdemes megjegyezni, hogy font-synthesisgyorsírásnak számít. A specifikáció szerint ezek kombinációja, font-synthesis-weightés font-synthesis-styleahol mindkettő elfogadja a autovagy értékeit none. Mivel ugyanezt a hatást el lehet érni a gyorsírás használatával, valószínűleg ez a legjobb út.

Értékek

  • none: Sem félkövér, sem ferde nem állítható elő
  • weight: A böngésző félkövér szintetizálhatja
  • style: A böngésző szintetizálhat
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 */

Használat

font-synthesishasználható minden elemgel, beleértve az ::first-letterés ::first-lineálelemeket is.

Vannak olyan esetek, amikor annak engedélyezése, hogy a böngésző félkövér és ferde szintetizációt készítsen egy egész nyelvről, van értelme, mert bármelyik eltakarhatja a karaktereket. Íme egy példa a specifikációból, amely letiltja a szintetizált félkövér és ferde betűtípusokat, amelyek arab karaktereket tartalmaznak:

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

Demó

Böngésző támogatás

Az írás idején a caniuse 20,21% -os globális lefedettséget jelent az font-synthesisingatlanra.

Asztal

AZAZ Él Firefox Króm Szafari Opera
Nem Nem 34+ Nem 9+ Nem

Mobil

iOS Safari Opera Mini Android böngésző Chrome Androidhoz Firefox Androidra
9+ Összes Nem Nem 68

Szeretné használni font-synthesisaz e-mailben? A Campaign Monitor jelentése szerint a következő ügyfelek támogatják:

  • Apple Mail 10+
  • Outlook for Mac
  • AOL Alto iOS alkalmazás
  • iOS Mail 10+
  • Veréb
  • G Suite
  • Gmail
  • Google Inbox

Több információ

  • CSS betűtípus modul 4. szintű specifikáció
  • „CSS3 teszt: font-synthesis“ Eric Meyer
  • Chris Coyier „Hogyan kell dőlt betűvel írni”