Font-family - CSS-Tricks

Anonim

font-familyProprietatea definește fontul pe care este aplicat elementului selectat. Fontul selectat nu este o singură față de font, ci o „familie” și, prin urmare, poate depinde de alte valori ale proprietății tipografice pentru a selecta fața corectă din familie.

body ( font-family: Arial, Helvetica, sans-serif; )

O valoare poate fi una dintre următoarele:

  • Un nume de familie de fonturi care se potrivește cu un font încorporat în pagină sau disponibil în sistemul utilizatorului.
  • O serie de nume de familie, separate prin virgule, care pot include un nume de familie generic

Dacă sunt utilizate mai multe nume de familie, browserul îl va selecta pe primul pe care îl găsește fie încorporat pe pagină utilizând @font-facesau instalat pe sistemul de operare al utilizatorului.

Căci font-familynu există o valoare implicită sau inițială specifică; valoarea inițială depinde întotdeauna de browser și / sau de sistemul de operare.

Numele de familie generice

Dacă sunt utilizate mai multe valori pentru o singură declarație, se recomandă ca o familie generică să fie listată ultima ca alternativă pentru a asigura cea mai bună experiență tipografică:

code ( font-family: Courier, Monaco, monospace; )

În exemplul de mai sus, „Courier” și „Monaco” sunt nume reale de familie ale fonturilor reale, în timp ce „monospace” este doar o referință generică la orice font instalat pe sistemul utilizatorului monospațiat.

Dacă primele două nu sunt găsite instalate, browserul va selecta cea mai bună opțiune, dar numai din fonturile monospace. Fără familia generică, fontul ar fi implicit la orice este fontul implicit din sistemul utilizatorului (probabil un serif sau sans-serif), ceea ce ar fi nedorit.

Numele de familie generice includ serif, sans-serif, cursive, fantasy, și monospace.

Dacă un nume de familie se potrivește cu un nume de familie generic, numele de familie ar trebui să fie citat pentru a indica faptul că nu este generic.

Numele de familie cu mai multe cuvinte

Dacă un nume de familie conține mai multe cuvinte, separate prin spații, se recomandă listarea numelui de familie între ghilimele (simple sau duble):

code ( font-family: "Times New Roman", Georgia, serif; )

Acest lucru nu este întotdeauna necesar, dar este în general mai sigur să includeți ghilimelele pentru orice nume de familie care are spații sau caractere speciale.

Suport pentru browser

Crom Safari Firefox Operă IE Android iOS
Lucrări Lucrări Lucrări Lucrări Lucrări Lucrări Lucrări