Sinteza pisav - CSS-triki

Anonim

font-systhesisHotel v CSS daje navodila brskalnika za kako ravnati pisavo krepko in ležeče črke, ko določena font-familypa jih ne vključuje.

Za primer vzemimo Lato iz Googlovih pisav. Piše, da obstaja 10 različnih različic pisave.

Vsaka od teh različic pisav je tehnično drugačna datoteka pisave. Če želimo uporabiti določene uteži in sloge, bi te datoteke povezali, tako da ima brskalnik nekaj za nalaganje.

Ta stavek običajno zahteva štiri različne datoteke pisave.

Toda vse pisave ne vključujejo datotek za obdelavo teže in sloga. V teh primerih bo brskalnik sam "sintetiziral" videz. Brskalnik dela najbolje, kar lahko, toda zaradi napačnega drznosti in sloga je besedilo včasih manj čitljivo; to je manj čitljiva kot resnično zasnovana različica. V najblažjih primerih lahko opazimo, da se znaki prekrivajo. V hujših primerih je besedilo popolnoma neberljivo ali pa lahko celo spremeni njegov pomen - kot se to lahko zgodi pri jezikih, kot so kitajščina, japonščina, korejščina in drugi logotipi.

Tu font-synthesispride. Nadzoruje, katere pisave brskalnik sme sintetizirati.

Sintaksa

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

V preprosti angleščini to pomeni font-synthesis, da sprejemamo:

  • vrednost none
  • bodisi weightalistyle
  • tako weightinstyle

Omeniti velja, da font-synthesisvelja za stenografsko lastnost. Glede na specifikacijo gre za kombinacijo font-synthesis-weightin font-synthesis-stylekjer oba sprejemata vrednosti autoali none. Ker je možno doseči enak učinek s pomočjo stenografije, je to verjetno najboljša pot.

Vrednote

  • none: Ne smeta biti sintetizirana niti krepko niti poševno
  • weight: Brskalnik lahko sintetizira krepko pisavo
  • style: Poševno lahko sintetizira brskalnik
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 */

Uporaba

font-synthesisse lahko uporablja z vsemi elementi, vključno z ::first-letterin ::first-linepsevdoelementi.

V nekaterih primerih je smiselno, če brskalniku ni dovoljeno sintetizirati krepko in poševno v celotnem jeziku, ker lahko kateri koli od njih zakrije znake. Tu je primer, izvlečen iz specifikacije, ki onemogoča sintetizirane drzne in poševne obraze pisav, ki vsebujejo arabske znake:

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

Demo

Podpora brskalnika

V času pisanja tega poročila caniuse poroča o 20,21-odstotni pokritosti font-synthesisnepremičnine.

Namizje

IE Rob Firefox Chrome Safari Opera
Ne Ne 34+ Ne 9+ Ne

Mobilni

iOS Safari Opera Mini Brskalnik Android Chrome za Android Firefox za Android
9+ Vse Ne Ne 68

Želite uporabiti font-synthesisv e-pošti? Campaign Monitor poroča, da ga podpirajo naslednje stranke:

  • Apple Mail 10+
  • Outlook za Mac
  • Aplikacija AOL Alto za iOS
  • iOS Mail 10+
  • Vrabec
  • G Suite
  • Gmail
  • Google Prejeto

Več informacij

  • Specifikacija modula pisave CSS 4. stopnje
  • "CSS3 test: font-synthesis" Eric Meyer
  • "Kako ležeče pisati besedilo" Chrisa Coyierja