Care sunt familiile generice de fonturi în CSS?

Clasificările generice ale fonturilor disponibile pentru a fi utilizate pe site-ul dvs. web

Când proiectați un site web, unul dintre elementele cheie ale unei pagini cu care veți lucra este conținutul de text. Ca atare, când construiți o pagină Web și stilizați-o cu CSS, o mare parte a acestui efort va fi centrată în jurul tipografiei site-ului.

Designul tipografic joacă un rol important în designul site-ului web. Conținutul textului bine format și formatat ajută un site să fie mai reușit, creând o experiență de citire care este atât plăcută, cât și ușor de consumat. O parte din eforturile dvs. de a lucra cu tipul va fi să alegeți fonturile potrivite pentru designul dvs. și apoi să utilizați CSS pentru a adăuga acele fonturi și stiluri de fonturi la afișarea paginii. Acest lucru se face prin utilizarea a ceea ce se numește " font-stack "

Font-Stivele

Când specificați un font pe care să-l utilizați într-o pagină web, este o practică optimă să includeți și opțiuni de rezervă în cazul în care nu puteți găsi opțiunea pentru fonturi. Aceste opțiuni de rezervă sunt prezentate în "stiva fontului". Dacă browserul nu găsește primul font din stivă, acesta se deplasează pe următorul. Aceasta continuă acest proces până când găsește un font pe care îl poate folosi sau se termină cu alegeri (caz în care doar alege orice font de sistem pe care îl vrea). Iată un exemplu de cum ar arăta un teanc de fonturi în CSS atunci când este aplicat elementului "body":

corp {font-familie: Georgia, "Times New Roman", serif; }

Observați că mai întâi specificăm fontul Georgia. În mod implicit, aceasta este ceea ce va folosi pagina, dar dacă acel font nu este disponibil din anumite motive, pagina va reveni Times New Roman. Inserăm numele fontului în citate dublă, deoarece este un nume cu mai multe cuvinte. Singurele nume de fonturi, cum ar fi Georgia sau Arial, nu necesită citatele, dar numele de font al mai multor cuvinte le are nevoie, astfel încât browserul să știe că toate aceste cuvinte alcătuiesc numele fontului.

Dacă arăți sfârșitul stiva fontului, ar trebui să observați că încheiem cu cuvântul "serif". Acesta este un nume de familie generic. În cazul puțin probabil că o persoană nu are Georgia sau Times New Roman pe calculatorul lor, site-ul va folosi orice font serif care ar putea găsi. Acest lucru este de preferat pentru a permite site-ului să se răstoarne la orice fonturi vrea, pentru că puteți cel puțin spune este ce fel de font pentru a utiliza, astfel încât aspectul general și tonul de design un site-ul va fi cât mai intacte posibil. Da, browserul va alege un font pentru dvs., dar cel puțin oferiți îndrumare, astfel încât să știe ce tip de font ar funcționa cel mai bine în cadrul designului.

Generic Font Families

Numele de fonturi generice disponibile în CSS sunt:

În timp ce există multe alte clasificări de fonturi disponibile în designul web și tipografia, inclusiv slab-serif, negru, afișaj, grunge și multe altele, aceste 5 nume de fonturi generice menționate mai sus sunt cele pe care le-ați folosi într-un font-stiva în CSS. Care sunt diferențele dintre aceste clasificări ale fontului? Hai să aruncăm o privire!

Fonturile cursive conțin adesea litere subțiri, ornate, care sunt destinate să reproducă un text fantezist scris de mână. Aceste fonturi, din cauza literelor subțiri, de flori, nu sunt potrivite pentru un bloc mare de conținut, cum ar fi copia corporală. Fonturile cursive sunt utilizate, în general, pentru titluri și nevoi de text mai scurte, care pot fi afișate în dimensiuni de dimensiuni mai mari.

Fonturile de tip fantezie sunt fonturile oarecum nebune care nu se încadrează într-o altă categorie. Fonturile care reproduc logouri bine cunoscute, cum ar fi foile de scris din filmele Harry Potter sau Back to the Future, se încadrează în această categorie. Încă o dată, aceste fonturi nu sunt potrivite pentru conținutul corpului, deoarece sunt adesea atât de stilizate încât citirea de pasaje lungi de text scrise în aceste fonturi este mult prea greu de făcut.

Fonturile monospace sunt cele în care toate formatele de scris sunt dimensionate și distanțate la fel, așa cum ați fi găsit pe o mașină de scris veche. Spre deosebire de alte fonturi care au lățimi variabile pentru litere în funcție de dimensiunea lor (de exemplu, o capitală "W" ar ocupa mult mai mult spațiu decât o "i"), fonturile monospace sunt lățimea fixă ​​pentru toate caracterele. Aceste fonturi sunt adesea folosite atunci când codul este afișat pe o pagină deoarece acestea arată diferit față de alt text de pe acea pagină.

Fonturile Serif sunt una dintre cele mai populare clasificări. Acestea sunt fonturi care au puțină ligaturi suplimentare pe formatele de litere. Aceste piese suplimentare se numesc "serifi". Fonturile serif comune sunt Georgia și Times New Roman. Fonturile Serif pot fi folosite pentru textul mare, cum ar fi titlurile, precum și pasaje lungi de text și copie corporală.

Sans-serif este clasificarea finală la care ne vom uita. Acestea sunt fonturi care nu au ligaturile menționate anterior. Numele înseamnă "fără serifi". Fonturile populare din această categorie ar fi Arial sau Helvetica. Similar cu serifurile, fonturile sans-serif pot fi folosite la fel de bine în titluri, precum și în conținutul corpului.

Articolul original de Jennifer Krynin. Editat de Jeremy Girard pe 10/16/17