Tutorial: Cum setezi fonturile si familiile de fonturi

Metoda sau posibilitatea de a schimba fonturile in documentele offline (de exemplu fisiere document create cu Microsoft Office Word) e simpla. Totusi, cand vine vorba de o pagina web, acest lucru nu mai devine atat de intuitiv, uneori fiind chiar dificil. Tehnologia CSS ne vine in ajutor si face ca procesul de setare a unui font sa fie mai usor, si chiar, sa ofere un mecanism de rezerva pentru acei utilizatori care nu au fonturile pe care vrei sa le folosesti.

Setarea fonturilor

Sa presupunem ca vrei sa setezi fontul Helvetica la toti selectorii headings. Pentru a face asta, scrie (in <style> sau in fisierul css):

h1, h2, h3, h4, h5, h6 {font-family: Helvetica;}

Ok, toate bune si frumoase, dar… 🙂 nu toti utilizatorii au instalat fontul Helvetica. Este recomandat sa folosim de fiecare data o familie de fonturi – font-family. Astfel, browser-ul va atibui textului primul font disponibil. In cazul nostru, folosim urmatoarea familie:

h1, h2, h3, h4, h5, h6 {font-family: Helvetica, Arial, Geneva;}

Astfel, dupa cum spuneam mai sus, browser-ul va verifica fonturile disponibile in ordinea care sunt scrise. Adica, Helvetica, Arial, Geneva si va atribui textului primul font disponibil.

Familii generice

Exista cazuri in care lista de mai sus nu este de ajuns. Ce se intampla daca un browser nu are acces la niciunul dintre fonturile listate? Browser-ul va atribui fontul implicit, cu exceptia cazului in care oferi un nume generic de familie pentru a suplimenta mecanismul de rezerva. De exemplu, in cazul nostru, fonturile alese fac parte din familia generica sans-serif. Codul nostru va arata astfel:

h1, h2, h3, h4, h5, h6 {font-family: Helvetica, Arial, Geneva, sans-serif;}

Atribuirea familiei generice sans-serif, comunica browser-ului sa foloseasca orice font sans-serif, in cazul in care niciunul din cele enumerate nu este disponibil.

Exista cinci familii de font-uri generice, cu toate ca doua dintre ele nu prea sunt utile folosite:

  • Serif: fonturi, cum ar fi Times, New Century Schoolbook, şi Garamond.
  • Sans-Serif: fonturi, cum ar fi Geneva, Helvetica si Arial.
  • Monospace: courier este cel mai frecvent font monospace utilizat. Retine ca fonturile monospace pot fi, de asemenea, fie Serif sau Sans-Serif. Courier este un font Serif, de exemplu.
  • Cursiv: fonturi care emuleaza scrisul de mana. Fonturile cursiv sunt, de obicei, destul de greu de citit pe ecran, astfel folosirea lor este descurajata. Unele browsere nu pot folosi fonturi cursiv.
  • Fantasy: fonturi care nu se incadreaza in ultimele patru familii, cum ar fi Zapf Dingbats, aerisi sau Klingon. Pentru ca este un mix din toate familiile, este definit mai mult de ceea ce nu este (cu alte patru familii de font) decat ceea ce este 🙂

Este posibil, de asemenea, pur si simplu sa declari un font generic de familie, fara niciun font anume. De exemplu:

h1, h2, h3, h4, h5, h6 {font-family: sans-serif;}

Asocierea fonturilor intre Macintosh si Windows

Familia Generica Fonturi Comune Macintosh Fonturi Comune Windows
Serif Times, New Century Schoolbook, Palatino Times New Roman, Georgia
Sans-serif Helvetica, Arial, Verdana* Arial, Tahoma, Verdana*
Monospace Courier Courier New
Cursive
Fantasy WingDings, Symbol WingDings, Symbol

* instalat odata cu Internet Explorer (unele sisteme de operare nu au instalat acest browser)