Stil mit {stil}

Aug 2009

CSS-Eigenschaft font-family – Wahl der Schriftfamilie in CSS

@font-face {
   font-family: TrajanPro-Regular;
   src: url(TrajanPro-Regular.ttf);
   }

Die CSS-Eigenschaft font-family wählt eine spezielle Schrift oder eine generische Schriftfamilie für ein Element. Da die Schriftfamilie vererbt wird, erbt jedes untergeordnete Element die Schriftfamilie von seinem Eltern-Element – es sei denn, für ein Element ist ein individueller CSS-Stil vermerkt. Um die Schriftfamilie für das gesamte Dokument festzulegen, reicht es also, font-family für das body-Element der Seite aufzunehmen.

body { font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; }

Der Browser wird die erste Schrift der Auswahlliste benutzen, die auf dem Zielsystem installiert ist. Die Verwendung von (doppelten) Hochkommas ist optional, aber sie empfiehlt sich, wenn der Name Leerstellen enthält: z.B. "Times New Roman". Wenn keine Hochkommas verwendet werden, soll der Browser alle Leerzeichen zwischen den Namensteilen eliminieren und den Fontnamen als Zeichenkette ohne Leerzeichen umsetzen.

font-family

IE4+ M1 N4+ O5+ S1 CSS1 Erblich: Ja

font-family

Auswahlliste für Schriften und eine generische Schriftfamilie. Einzelnen Werte werden durch Kommas voneinander getrennt. Für die generische Schriftfamilie gibt eine von fünf Möglichkeiten:

• serif
• sans-serif
• cursive
• fantasy
• monospace

Allgemein wird empfohlen, stets eine generische Schriftfamilie als letzten Eintrag in die Auflistung aufzunehmen. Die generische Schrift wird benutzt, wenn die Schriften der Auflistung auf dem System des Benutzers nicht zur Verfügung stehen.

Generische Schriftfamilie

<p style="font-family: serif;">Der frühe Vogel fängt den Wurm.</p>
<p style="font-family: sans-serif;">Der frühe Vogel fängt den Wurm.</p>
<p style="font-family: cursive;">Der frühe Vogel fängt den Wurm.</p>
<p style="font-family: fantasy;">Der frühe Vogel fängt den Wurm.</p>
<p style="font-family: monospace;">Der frühe Vogel fängt den Wurm.</p>

Darstellung