Indiferent de ce site vom dori sa construim, cu siguranta vom folosi text, iar lucru ce influenteaza cel mai mult textul dintr-o pagina este fontul.
In aceasta lectie vom vedea cum putem seta fontul pe un element sau pe toata pagina.
Pentru a schimba fontul unui element vom folosi regula font-family, ce primeste ca valoare o lista de fonturi pe care sa le aplice:
.o-clasa {
font-family: "Times New Roman", Georgia, serif;
}Aceasta regula poate primi mai multe valori, pentru ca din pacate noi nu stim daca cel ce viziteaza pagina noastra are primul font instalat pe calculatorul lui.
Fonturile depind de sistemul de operare pe care il foloseste cel ce ajunge pe pagina. Puteti vedea o lista de fonturi des intalnite aici.
Daca primul font nu poate fi folosit atunci regula va incerca sa il foloseasca pe urmatorul, si apoi pe urmatorul si apoi pe urmatorul, pana va gasi unul disponibil. De aceea este indicat sa trecem mai multe fonturi aici ca sa fim siguri ca pagina va folosi un font pe care noi l-am ales.
Prima valoare ar trebui sa fie fontul care dorim cel mai mult sa il folosim, apoi al doilea favorit si asa mai departe.
Daca numele unui font este format din mai multe cuvinte, precum Times New Roman, atunci numele lui trebuie cuprins intre ghilimele: "Times New Roman".
Setarea fontului pe intreaga pagina
Pentru a seta un font pe toata pagina, proprietatea font-family trebuie setata pe elementul care cuprinde toate celelalte elemente. Si acesta este <body>.
Toate elementele din interior vor mosteni aceasta regula, daca ea nu va fi suprascrisa de alta regula CSS specifica pentru acel element.
body {
font-family: Calibri, Verdana, sans-serif;
}Acum toate celelalte elemente din pagina avea acest font.
Setarea fontului pe un element
Pentru a seta un font pe un element, nu trebuie decat sa scriem selectorul pentru acel element si apoi regula:
#un-element {
font-family: Arial, Tahoma, "Century Gothic", Verdana, sans-serif;
}Aceasta va suprascrie orice regula care elementul o mosteneste de la parintele lui.