Ce face font-family
font-family acceptă o listă de fonturi separate prin virgulă, parcurse de la stânga la dreapta. Dacă primul font nu este instalat pe calculatorul vizitatorului sau nu este încărcat prin web font, browserul trece la următorul.
Ultimul nume din listă trebuie să fie întotdeauna o familie generică de sistem: sans-serif (font fără serife, curat și modern), serif (cu serife, stil ziar/carte) sau monospace (lățime fixă, pentru cod).
Dacă numele fontului conține spații (de exemplu 'Open Sans'), el trebuie pus obligatoriu între ghilimele.
Valori uzuale
| Valoare | Descriere |
|---|---|
sans-serif |
Font modern fără liniuțe la capete (Arial, Helvetica, Inter). |
serif |
Font clasic cu ornamente la capete (Times New Roman, Merriweather). |
monospace |
Fiecare literă are aceeași lățime (Consolas, Courier, Fira Code). |
system-ui |
Fontul nativ al sistemului de operare (San Francisco pe Apple, Segoe pe Windows). |
Exemple
Exemplul 1: Stivă de fonturi modernă de sistem (fără încărcare externă lentă)
Oferă performanță maximă de încărcare deoarece fontul există deja în telefon/calculator.
body {
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
code, pre {
font-family: 'JetBrains Mono', Consolas, monospace;
}Efect vizual în browser
Textul general se afișează clar cu fontul nativ al dispozitivului, iar blocurile de cod au font monospațiat impecabil.Greșeli frecvente
- Omiterea familiei generice de la final (scrierea font-family: ‘Inter’; fără sans-serif la final înseamnă că dacă fontul pică la descărcare, browserul poate cădea pe Times New Roman).
Comenzi înrudite
font-size (rem, em, px, clamp): Stabilește dimensiunea textului; se recomandă unități rem pentru respectarea preferințelor utilizatorului.font-weight: Stabilește grosimea caracterelor de text (de la subțire la ultra-îngroșat).line-height: Stabilește distanța verticală dintre rândurile de text dintr-un paragraf, asigurând o citire confortabilă.