Alegerea fontului este importantă
Felul în care cititorii percep un site web depinde mult de fontul pe care îl alegi.
Un font bine ales poate oferi și unui brand o identitate puternică. Caută unul ușor de citit și dă-i o culoare și o dimensiune potrivite.
Proprietatea CSS font-family
Fontul unui element este setat cu proprietatea font-family.
Sfat: Enumeră mai multe nume de fonturi, separate prin virgule, pentru ca ele să funcționeze ca sistem de rezervă: un browser care nu suportă primul font trece la următorul.
Pune pe primul loc fontul pe care îl dorești de fapt și pe ultimul o familie generică, astfel încât browserul să poată alege ceva asemănător atunci când nimic altceva din listă nu este disponibil.
Notă: Un nume de font format din mai multe cuvinte, precum "Times New Roman", se pune între ghilimele.
Exemplu
Fiecare paragraf are propria stivă de font-family.
<style> intern, creați trei clase de paragraf: p1 cu "Times New Roman", Times, serif; p2 cu Arial, Helvetica, sans-serif; și p3 cu "Lucida Console", "Courier New", monospace. Adăugați un paragraf pentru fiecare clasă.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>
</body>
</html>
Familii generice de fonturi CSS
În CSS există cinci familii generice de fonturi:
- Serif — o mică terminație încheie marginile fiecărei litere, ceea ce dă o impresie formală și elegantă.
- Sans-serif — liniile curate, fără terminații, creează un aspect modern și minimalist.
- Monospace — lățimea fixă, comună tuturor literelor, arată mecanic.
- Cursive — literele imită scrisul de mână uman.
- Fantasy — fonturile sunt decorative și jucăușe.
Orice nume de font pe care îl întâlnești aparține uneia dintre aceste familii.
Diferența dintre fonturile Serif și Sans-serif
Notă: Fonturile serif sunt considerate mai greu de citit pe ecranele computerelor decât fonturile sans-serif.
Câteva exemple de fonturi
Câteva nume de fonturi din fiecare familie generică:
- Serif — de exemplu Times New Roman, Georgia și Garamond.
- Sans-serif — de exemplu Arial, Verdana și Helvetica.
- Monospace — de exemplu Courier New, Lucida Console și Monaco.
- Cursive — de exemplu Brush Script MT și Lucida Handwriting.
- Fantasy — de exemplu Copperplate și Papyrus.