Družine generičnih pisav v CSS

click fraud protection

Tipografsko oblikovanje igra pomembno vlogo pri oblikovanju spletnih strani. Dobro postavljena in oblikovana besedilna vsebina spletnemu mestu pomaga do uspešnejšega ustvarjanja bralne izkušnje, ki je prijetna in enostavna za uporabo. Del vaših prizadevanj pri delu s tipom bo izbrati prave pisave za svoj dizajn in nato s pomočjo CSS dodati te pisave in sloge pisav na zaslon strani. To se naredi tako, da se imenuje a sklad pisav.

Nabori pisav

Ko ti določite pisavo za uporabo na spletni strani je najboljša praksa, če vključite tudi nadomestne možnosti, če izbire pisave ni mogoče najti. Te nadomestne možnosti so predstavljene v sklad pisav. Če brskalnik ne najde prve pisave, navedene v kupu, se premakne na naslednjo. Ta postopek nadaljuje, dokler ne najde pisave, ki jo lahko uporabi, ali pa ji zmanjka možnosti (v tem primeru preprosto izbere katero koli želeno sistemsko pisavo). Tu je primer, kako bi bil sklad pisav videti v CSS, ko bi bil uporabljen za element "body":

telo {
družina pisav: Georgia, "Times New Roman", serif;
}
instagram viewer

Najprej se prikaže pisava Georgia, zato bo to stran privzeto uporabila, če pa ta pisava iz nekega razloga ni na voljo, se stran vrne v Times New Roman.

Priloži Times New Roman z dvojnimi narekovaji, ker gre za večbesedno ime. Imena enobesednih pisav, kot sta Georgia ali Arial, ne zahtevajo narekovajev, vendar jih potrebuje večbesedno ime pisave z vdelanimi presledki, tako da brskalnik ve, da vse te besede vsebujejo ime pisave.

Sklad pisav se konča z besedo serif. To je generično družinsko ime pisave. V malo verjetnem primeru, da oseba nima Gruzije oz Times New Roman v svojem računalniku bi spletno mesto uporabljalo katero koli serifno pisavo, ki bi jo našlo. Brskalnik bo izbral pisavo za vas, vendar boste vsaj ponudili smernice, da bo vedel, kakšna pisava bi najbolje delovala v oblikovanju.

Družine generičnih pisav

Splošno ime pisave, ki je na voljo v CSS, je:

  • kurziv
  • fantazija
  • enoprostor
  • serif
  • sans-serif

Medtem ko je v spletnem oblikovanju in tipografiji na voljo veliko drugih klasifikacij pisav, vključno s ploščami-serif, črka, prikaz, grunge in še več, teh pet splošnih imen pisav bi uporabljali v skladu pisav v CSS.

  • Kurzivne pisave - pogosto vsebujejo tanke, okrašene oblike črk, ki naj bi posnemale modno rokopisno besedilo. Te pisave zaradi tankih cvetočih črk niso primerne za velik blok vsebine, kot je telesna kopija. Kurzivne pisave se običajno uporabljajo za naslove in potrebe krajših besedil, ki jih je mogoče prikazati v večjih velikostih pisav.
  • Fantazijske pisave - so nekoliko nore pisave, ki v resnici ne spadajo v nobeno drugo kategorijo. Pisave, ki podvajajo znane logotipe, na primer obrazci iz Harry Potter ali Nazaj v prihodnosti filmi, spadajo v to kategorijo. Te pisave niso primerne za vsebino telesa, saj so pogosto tako stilizirane, da je branje daljših odlomkov besedila, napisanega v teh pisavah, pretežko.
  • Monospace pisave - vsebujejo enako velike in razporejene črkovne oblike, kot bi jih našli na starem pisalnem stroju. Za razliko od drugih pisav, ki imajo spremenljivo širino črk, odvisno od njihove velikosti (na primer velike črke W zavzame veliko več prostora kot mala črka jaz), monospace pisave uporabljajo fiksno širino za vse znake. Te pisave se pogosto uporabljajo za branje kode, ker se na videz močno razlikujejo od drugih besedil na tej strani.
  • Pisave z zaporednimi črkami - na obrazcih uporabite malo dodatnih ligatur. Ti dodatni kosi se imenujejo serifi. Pogosti serifni pisavi sta Georgia in Times New Roman. Serifne pisave se odlično obnesejo tako za veliko besedilo, kot je naslov, kot tudi za dolge odlomke besedila in telesne kopije.
  • Brez serifapisave - nimajo ligatur. Ime pomeni brez serifov. Priljubljene pisave v tej kategoriji vključujejo Arial ali Helvetica. Podobno kot serifi se tudi pisave brez serifa enako dobro obnesejo tako v naslovih kot v vsebini telesa, čeprav nekatere strokovnjaki raje, da se veliki bloki besedila izogibajo pisavam brez serifov, ker jih je težje brati v majhni točki velikosti.
instagram story viewer