Tutorial CSS - Font si familii de fonturi

  »   CSS  »   Tutorial CSS - Font si familii de fonturi

Tutorial CSS Fonturi si familii de fonturi

Exista doua tipuri principale de fonturi si anume "serif" si "sans serif". Intre ele nu este mare diferenta dar ceea ce este de retinut este ca: fonturile familiei "serif" sunt mai usor de citit.

Pentru a specifica fontul cu ajutorulCSS-ului vom folosi codul urmator

cssp { font-family: "Times New Roman", Georgia,Serif; }

Dupa cum se poate observa se pot prestabili mai multe fonturiin cazul in care userul nu are instalat fontul principal, sau browser-ul nu suporta fontulrespectiv.

CSS - font style si font weight

Font style si font weight in CSS se refera la text normal, inclinat sau ingrosat.

cssp { font-style: normal; }
p { font-style: italic; }
p { font-weight: bold; }

Sunt si alte valori pe care le pot lua atat font style cat si font weight dar cele de mai sus sunt cele care se folosesc in mod normal in CSS. Am ajaugat totusi o lista cu toate valorile acceptate ceva mai jos.

CSS - Marimea textului

Pentru a stabili marimea textului cu ajutorul CSS-ului vom folosii atributul "font-size" dupa cum urmeaza:

cssh1 { font-size: 30px; }
h2 { font-size: 20px; }
p { font-size: 12px; }

Exemplele de mai sus functioneaza foarte bine in Firefox Opera si Google Cherome, dar nu si in Internet Explorer problema apare atunci cand se mareste textul. Daca nu te intereseaza ca utilizatori paginii tale nu vor putea schimba marimea textului pentru o mai buna vizivilitate poti folosii expresiile de mai sus fara alte complicatii.

Dar daca vrei sa elimini si aceasta problema poti folosi "em" ca unitate de masura. Unitatea de masura "em" este recomandata de w3.org si 1em=16px. Dupa cum se poate deduce, formula pt a calcula marimea textului in "em" este em=numar_pixeli/16.

cssh1 { font-size: 1.875em; }
h2 { font-size: 1.25em; }
p { font-size: 0.75em; }

CSS - font variant

"Font variant" nu face in principìu mare lucru dar nu strica amintit:

cssp { font-variant: small-caps; }

Expresia de mai sus transforma textul formatat cu ajutorul CSS in majuscule ceva mai mici decat cele normale.