Familii de fonturi
Stefanescu Mihai 2 years ago CSSProprietatea font din CSS se refera la familia fontului, grosimea, marimea si stilul.
Diferenta dintre fonturile Serif si Sans-Serif:
Familii de fonturi CSS
In CSS exista doua tipuri de familii:
-familia fonturilor generice – grup de fonturi ce se aseamana cu “Serif” sau “Monospace”
-Familiile de fonturi – familii specifice precum “Times New Roman” sau “Arial”
|
Familii Generice |
Familii de fonturi |
Descrere |
|---|---|---|
| Serif | Times New Roman Georgia |
Fonturile Serif au mici liniute la sfarsitul anumitor caractere |
| Sans-serif | Arial Verdana |
“Sans” inseamna fara – aceste fonturi sunt identice cu fonturile Serif, dar nu au liniutele de carepovesteam mai sus. |
| Monospace | Courier New Lucida Console |
Toate caracterele au aceasi latime. |
Font Family
Familia din care va face parte un text va fi setata cu proprietatea font-family.
Este recomandat sa alegeti mai multe familii de fonturi in caz ca un utilizator nu dispune de cea aleasa de voi, caz in care va incarca al doilea font din lista.
Incepe cu fontul pe care doresti sa il folosesti si termina lista cu un font generic (ce se gaseste cu siguranta pe orice computer).
Atentie: Daca numele unei familii este compusa din mai multe cuvinte trebuie sa il pui in ghilimele.
Exemplu:
p {
font-family: "Times New Roman", Times, serif;
}
Font Style
De obicei aceasta proprietate este folosita pentru a face un anumit font italic.
Aceasta poate lua urmatoarele valori:
- normal – Textul este afisat normal
- italic – Textul este afisat italic (inclinat)
- oblique – Textul este “aplecat” (in caz ca fontul folosit de tine nu are si versiune de italic).div.normal {font-style:normal;}
div.italic {font-style:italic;}
div.oblique {font-style:oblique;}
Font Size
Aceasta proprietate seteaza dimensiunea fontului.
Lucru foarte important in web design, oricum nu ar trebuii sa faci fontul din paragrafe sa arata ca cel din heading (h1, h2, s.a.m.d) sau invers.
Foloseste mereu tag-urile HTML prestabilite <h1> … <h6> pentru heading-uri si <p> pentru paragrafe.
Dimensiunea poate fi absoluta sau relativa:
Absoluta:
- Seteaza textul la o anumita dimensiune
- Nu permite modificarea dimensiunii din browser.
Relativa:
- Seteaza dimensiunea ralitava fata de elementele alaturate
- Permite modificarea din browser.
! Daca nu setezi o dimensiune textului, acesta va lua dimensiunile standard (ex: paragraful = 16px=1em).
Seteaza dimensiunea in Pixeli
Setarea dimensiunii textului in pixeli iti da control total asupra acestuia:
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
Exemplul de mai sus permite browserelor Internet Explorer 9, Firefox, Chrome, Opera si Safari sa modifice dimensiunea.
Nota: Dimensiunea textului poate fi modificata din browser folosind optiunea zoom.
Seteaza dimensiunea in Em
Pentru a evita problemele deredimensionare a textului in versiunile mai vechi de Internet Explorer sunt folositi em in loc de pixeli.
Aceasta unitate de masura (Em) este recomandata de W3C.
Un em este egal cu dimensiunea curenta a textului, care este de 16px…deci 1em = 16px.
Pentru a transforma pixelii in emputeti utiliza formule: pixeli/16=em.
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
In acest exemplu, dimensiunea textului in em este la fel ca cea in pixeli din exemplul anterior. In fine, cu em-uri este posibila redimensionarea textului din browser.
Din pacate, tot exista probleme in versiunile mai vechi de IE.
Combina procentaje cu Em
O combinatie ce functioneaza in toate browserele, seteaza font size pentru tag-ul <body> in procente:
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
