Den font-familyegenskapen definierar fonten som appliceras på det valda elementet. Det valda teckensnittet är inte ett enda teckensnitt utan en "familj" och kan därför vara beroende av andra typografiska egenskaper för att välja rätt ansikte inom familjen.
body ( font-family: Arial, Helvetica, sans-serif; )Ett värde kan vara något av följande:
- Ett teckensnittsnamn som matchar ett teckensnitt som är inbäddat på sidan eller tillgängligt i användarens system.
- En serie familjenamn, åtskilda av kommatecken, som kan innehålla ett generiskt efternamn
Om flera familjenamn används, kommer webbläsaren att välja det första som den hittar antingen inbäddad på sidan med @font-faceeller installerad på användarens operativsystem.
För font-familydet finns inget specifikt standardvärde eller initialvärde; det ursprungliga värdet beror alltid på webbläsaren och / eller operativsystemet.
Generiska familjenamn
Om flera värden används för en enda deklaration rekommenderas det att en generisk familj listas senast som reserv för att säkerställa bästa typografiska upplevelse:
code ( font-family: Courier, Monaco, monospace; )I exemplet ovan är "Courier" och "Monaco" riktiga efternamn på faktiska teckensnitt, medan "monospace" bara är en generisk referens till alla teckensnitt som är installerade i användarens system som är monospaced.
Om de två första inte hittas installerade väljer webbläsaren det bästa alternativet, men bara från monospace-teckensnitt. Utan den generiska familjen skulle teckensnittet vara det som är standardteckensnittet i användarens system (sannolikt en serif eller sans-serif), vilket skulle vara oönskat.
Generiska efternamn inkluderar serif, sans-serif, cursive, fantasy, och monospace.
Om ett efternamn matchar ett generiskt efternamn, ska familjenamnet anges för att ange att det inte är generiskt.
Familjnamn med flera ord
Om ett efternamn innehåller flera ord, åtskilda av mellanslag rekommenderas det att ange släktnamnet i citattecken (enstaka eller dubbla):
code ( font-family: "Times New Roman", Georgia, serif; )Detta är inte alltid nödvändigt, men det är i allmänhet säkrare att inkludera offerten för alla släktnamn som har mellanslag eller specialtecken.
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Arbetar | Arbetar | Arbetar | Arbetar | Arbetar | Arbetar | Arbetar |