Eigenschap font-family

De eigenschap font-family stelt het lettertype in.

Syntaxis

selector {
	font-family: lettertype-naam;
}

Opmerking

Als de lettertype-naam spaties bevat, bijvoorbeeld Times New Roman, moet deze tussen enkele of dubbele aanhalingstekens worden geplaatst.

Opmerking

Meerdere vergelijkbare lettertypen kunnen gescheiden door komma's worden opgesomd. Wanneer de browser het eerste lettertype in de lijst tegenkomt, controleert het of het aanwezig is op de computer van de gebruiker. Als dat lettertype niet aanwezig is, wordt het volgende lettertype uit de lijst genomen en eveneens gecontroleerd op aanwezigheid. Daarom vergroot het opgeven van meerdere lettertypen de kans dat er ten minste één van wordt gevonden op de computer van de client.

De lijst wordt meestal afgesloten met een sleutelwoord dat het type lettertype beschrijft (alle lettertypen behoren tot een bepaald type) - serif, sans-serif, cursive, fantasy of monospace. Als de browser geen enkel van de opgegeven lettertypen op de computer van de gebruiker vindt, dan kiest het er een uit het opgegeven type.

Lettertype types

Type	Beschrijving
`serif`	Lettertype met schreef.
`sans-serif`	Lettertype zonder schreef.
`cursive`	Cursief lettertype.
`fantasy`	Decoratief lettertype met mooie krullen en ongebruikelijke effecten.
`monospace`	Monospace lettertype, waarbij de breedte van elk karakter gelijk is.

Standaardwaarde: het lettertype dat standaard in de browser is ingesteld. Meestal is dit Times New Roman.

Voorbeeld

Wijzen we het lettertype de familie Arial toe:

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: Arial;
}

Voorbeeld

Wijzen we het lettertype de familie Times New Roman toe. Omdat de naam van het lettertype uit meerdere woorden bestaat, plaatsen we het tussen aanhalingstekens:

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: "Times New Roman";
}

Voorbeeld

Wijzen we het lettertype een lettertype uit de groep serif toe (waarschijnlijk wordt Times New Roman gekozen):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: serif;
}

Voorbeeld

Wijzen we het lettertype een lettertype uit de groep sans-serif toe (waarschijnlijk wordt Arial gekozen):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: sans-serif;
}

Voorbeeld

Wijzen we het lettertype een lettertype uit de groep fantasy toe (bij jou werkt het misschien niet vanwege de afwezigheid van een dergelijk lettertype):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: fantasy;
}

Voorbeeld

Wijzen we het lettertype een lettertype uit de groep monospace toe (letters worden even breed):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: monospace;
}