CSS: Was bedeutet font-family : serif oder sans-serif

Sowohl serif als auch sans-serif sind keine direkte Schriftart sondern im Browser definierte generische Schriftfamilie. "serif" meint eine Schriftart mit Serifen wie zum Beispiel Georgia, Times oder Times New Roman und "sans-serif" meint eine Schriftart ohne Serifen wie beispielsweise Arial, Helvetica oder Verdana.

Was heißt das aber nun konkret? Schauen wir uns ein Beispiel an für zwei Definitionen von font-families:

h1 {font-family: Georgia, Times, serif;}
h2 {font-family: Helvetica, Arial, Verdana, sans-serif;}

Wenn ein Browser diese Anweisungen erhält, soll er die h1 Überschriften bevorzugt in der Schriftart Georgia schreiben. Ist die Schriftart Georgia nicht installiert, soll stattdessen die Schriftart Times verwendet werden. Sind beide Schriftarten nicht installiert, kommen wir zu dem Wert serif. Damit erhält der Browser die Anweisung zumindest eine Schrift mit Serifen zu verwenden, wenn schon die anderen Serifen-Schriften nicht verfügbar sind. Sinn der Sache ist, dass man damit wenigstens noch ein bisschen steuern kann, wie das Schriftbild der Website später aussehen soll.

Ähnlich verhält es sich mit h2 aus dem Beispiel. Die angegebenen Alternativen werden in der definierten Reihenfolge durchgegangen, ist keine der aufgeführten Schriften verfügbar, sorgt sans-serif dafür, dass eine Schrift ohne Serifen für den Text verwendet wird.

Neben serif und sans-serif gibt es auch noch die Werte monospace für eine Schrift mit fixer Breite (wie zum Beispiel Courier), cursive für eine Schreibschrift und fantasy für eine außergewöhnliche Schrift. Welche Schrift nun genommen wird, wenn eine solche Eigenschaft definiert ist, entscheidet der Browser. Firefox verwendet unter Windows beispielsweise die Schriften Times New Roman (serif), Arial (sans-serif) und Courier New (Monospace). In der Regel lassen sich diese Default-Schriften auch in den Einstellungen anpassen.
10.07.2017 um 18:34