Egenskapen font-family

Egenskapen font-family ställer in teckensnittstypen.

Syntax

selektor {
	font-family: teckensnittsnamn;
}

Anmärkning

Om teckensnittsnamnet innehåller mellanslag, till exempel, Times New Roman, ska det omges av enkla eller dubbla citationstecken.

Anmärkning

Man kan lista flera liknande teckensnitt separerade med kommatecken. När webbläsaren stöter på det första teckensnittet i listan, kontrollerar den dess närvaro på användarens dator. Om ett sådant teckensnitt inte finns, tas nästa teckensnitt från listan och även det analyseras för närvaro. Därför ökar flera teckensnitt sannolikheten för att åtminstone ett av dem kommer att upptäckas på klientdatorn.

Listan avslutas vanligtvis med ett nyckelord som beskriver teckensnittstypen (alla teckensnitt tillhör någon typ) - serif, sans-serif, cursive, fantasy eller monospace. Om webbläsaren inte hittade något av de angivna teckensnitten på användarens dator, så kommer den välja ett av teckensnitten av den angivna typen.

Teckensnittstyper

Typ	Beskrivning
`serif`	Teckensnitt med serifer.
`sans-serif`	Teckensnitt utan serifer.
`cursive`	Kursivt teckensnitt.
`fantasy`	Dekorativt teckensnitt med vackra snirklar och ovanliga effekter.
`monospace`	Teckensnitt med fast bredd, där varje teckens bredd är densamma.

Standardvärde: teckensnittet som är inställt i webbläsaren som standard. Vanligtvis är detta Times New Roman.

Exempel

Låt oss tilldela teckensnittet familjen Arial:

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

p {
	font-family: Arial;
}

Exempel

Låt oss tilldela teckensnittet familjen Times New Roman. Eftersom teckensnittsnamnet består av flera ord, sätter vi det inom citationstecken:

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

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

Exempel

Låt oss tilldela teckensnittet ett teckensnitt från gruppen serif (troligtvis kommer Times New Roman att användas):

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

p {
	font-family: serif;
}

Exempel

Låt oss tilldela teckensnittet ett teckensnitt från gruppen sans-serif (troligtvis kommer Arial att användas):

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

p {
	font-family: sans-serif;
}

Exempel

Låt oss tilldela teckensnittet ett teckensnitt från gruppen fantasy (kanske inte fungerar för dig på grund av avsaknad av ett sådant teckensnitt):

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

p {
	font-family: fantasy;
}

Exempel

Låt oss tilldela teckensnittet ett teckensnitt från gruppen monospace (bokstäverna kommer att bli lika stora):

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

p {
	font-family: monospace;
}