Tutorial CSS - Font si familii de fonturi

Tutoriale CSS si HTML, tutoriale editare si instalare site-uri in CSS si HTML!
Avatar utilizator
DarkArms
Membru
Mesaje: 3107
Localitate: Reșița, România
Nick server: cleks
Contact:

Tutorial CSS - Font si familii de fonturi

Mesaj de DarkArms » Vin Apr 22, 2016 9:33 am

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 ajutorul CSS-ului vom folosi codul urmator

Cod: Selectaţi tot

p { 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.

Cod: Selectaţi tot

p { font-style: normal;[code]
}
p { font-style: italic; }
p { font-weight: bold; }[/code]

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:

Cod: Selectaţi tot

h1 { 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.

Cod: Selectaţi tot

h1 { 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:

Cod: Selectaţi tot

p { font-variant: small-caps; }
Expresia de mai sus transforma textul formatat cu ajutorul CSS in majuscule ceva mai mici decat cele normale.

Înapoi la “Tutoriale CSS si HTML”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 1 vizitator