Eigenschaft font-family

Die Eigenschaft font-family legt die Schriftart fest.

Syntax

Selektor {
	font-family: Schriftname;
}

Hinweis

Wenn der Schriftname Leerzeichen enthält, zum Beispiel Times New Roman, muss er in einfache oder doppelte Anführungszeichen gesetzt werden.

Hinweis

Mehrere ähnliche Schriftarten können durch Kommas getrennt aufgelistet werden. Wenn der Browser auf die erste Schriftart in der Liste stößt, prüft er, ob sie auf dem Computer des Benutzers vorhanden ist. Wenn diese Schriftart nicht vorhanden ist, wird die nächste Schriftart aus der Liste genommen und ebenfalls auf Vorhandensein überprüft. Daher erhöht die Angabe mehrerer Schriftarten die Wahrscheinlichkeit, dass mindestens eine davon auf dem Client-Computer gefunden wird.

Die Liste wird normalerweise mit einem Schlüsselwort beendet, das den Schriftarttyp beschreibt (alle Schriftarten gehören zu einem bestimmten Typ) - serif, sans-serif, cursive, fantasy oder monospace. Wenn der Browser keine der angegebenen Schriftarten auf dem Computer des Benutzers findet, wählt er eine der Schriftarten des angegebenen Typs aus.

Schriftarttypen

Typ	Beschreibung
`serif`	Serifenschrift (Schrift mit Serifen).
`sans-serif`	Serifenlose Schrift (Schrift ohne Serifen).
`cursive`	Kursivschrift.
`fantasy`	Dekorative Schrift mit schönen Schnörkeln und ungewöhnlichen Effekten.
`monospace`	Dicktengleiche Schrift, bei der die Breite jedes Zeichens gleich ist.

Standardwert: Die im Browser standardmäßig eingestellte Schriftart. Normalerweise ist dies Times New Roman.

Beispiel

Weisen wir der Schrift die Familie Arial zu:

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

p {
	font-family: Arial;
}

Beispiel

Weisen wir der Schrift die Familie Times New Roman zu. Da der Schriftname aus mehreren Wörtern besteht, setzen wir ihn in Anführungszeichen:

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

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

Beispiel

Weisen wir der Schrift eine Schrift aus der Gruppe serif zu (höchstwahrscheinlich wird Times New Roman verwendet):

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

p {
	font-family: serif;
}

Beispiel

Weisen wir der Schrift eine Schrift aus der Gruppe sans-serif zu (höchstwahrscheinlich wird Arial verwendet):

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

p {
	font-family: sans-serif;
}

Beispiel

Weisen wir der Schrift eine Schrift aus der Gruppe fantasy zu (könnte bei Ihnen möglicherweise nicht funktionieren, falls eine solche Schriftart nicht vorhanden ist):

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

p {
	font-family: fantasy;
}

Beispiel

Weisen wir der Schrift eine Schrift aus der Gruppe monospace zu (die Buchstaben werden gleich breit):

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

p {
	font-family: monospace;
}