Schriftarten festlegen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Für den Text einer Webseite soll eine bestimmte Schriftart verwendet werden.

Lösung

Verwenden Sie die Eigenschaft font-family:

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

Diskussion

Wenn Sie eine durch Kommata getrennte Liste für die Eigenschaft font-family angeben, können Sie festlegen, welche Schriftarten der Browser für die Darstellung einer Webseite verwenden soll. Kann der Browser die erste Schrift in der Liste nicht finden, versucht er es mit der nächsten, bis eine passende Schrift gefunden wurde. Konnte keine Schrift gefunden werden, resultiert die Kaskade schließlich in der im User-Agent-Stylesheet definierten Schriftart.

Enthält der Schriftname Leerzeichen, wie Times New Roman, müssen Sie den Namen mit einfachen oder doppelten Anführungszeichen umgeben.

Am Ende der Liste mit expliziten Schriftnamen sollten Sie mindestens eine allgemeine Schriftfamilie angeben, um die gewünschte Darstellung auch dann grundsätzlich zu gewährleisten, wenn der Browser auf keine der vorher aufgelisteten Schriften zurückgreifen kann. In CSS können Sie aus fünf Schriftfamilien wählen (siehe folgende Tabelle).

Tabelle: CSS-Schriftfamilien.

Wert für allgemeine Schriftfamilie Beispiele für Schriftnamen dieser Familie
serif Georgia, Times, Times New Roman, Garamond und Century Schoolbook
sans-serif Verdana, Arial, Helvetica, Trebuchet und Tahoma
monospace Courier, MS Courier New und Prestige
cursive Lucida Handwriting und Zapf-Chancery
fantasy Comic Sans, Whimsey, Critter und Cottonwood

Alle Webbrowser enthalten eine Liste mit Schriften, die den Familien in der vorigen Tabelle zugeordnet werden können. Wird kein bestimmter Schriftname per CSS-Regel ausgewählt oder ist die gewählte Schrift auf dem Rechner des Benutzers nicht verfügbar, so verwendet der Browser einen anderen Font aus einer dieser Schriftfamilien.

Am problematischsten ist der allgemeine Wert fantasy, da dieser für alle Schriften steht, die in keine der anderen Kategorien passen. Da nicht vorhersehbar ist, wie dieser Wert tatsächlich dargestellt wird, vermeiden viele Designer diese Schriftfamilie. Ein weiterer problematischer Wert ist cursive, da einige Systeme und Browser keine kursiven Schriftschnitte darstellen können. Stattdessen wird eine vom Browser definierte Standardschrift verwendet, sie sich nur schwer vorhersehen lässt. Da als cursive markierter Text möglicherweise nicht mit einem kursiven Schriftschnitt dargestellt wird, wird auch dieser allgemeine Wert von einigen Designern vermieden.

Wenn Sie eine seltene Schrift benutzen wollen, die möglicherweise nicht auf allen Benutzersystemen installiert ist, sollten Sie es sich zur Gewohnheit machen, als letzten Wert für die Eigenschaft font-family entweder serif, sans-serif oder monospace zu verwenden. Damit ist zumindest ein gewisses Maß an Lesbarkeit gewährleistet.

Sie brauchen diese Eigenschaften übrigens nicht für jedes benutzte Tag erneut festzulegen. Ein Kindelement erbt die Werte seines Elternelements, sofern dies in der CSS-Spezifikation nicht anders definiert ist. Das Kindelement erhält in diesem Fall automatisch die gleichen Eigenschaftswerte wie sein Elternelement. Legen Sie beispielsweise für einen Absatz, der ein em-Element enthält, für die Eigenschaft font-family fest, dass eine Serifenschrift benutzt werden soll, so wird auch das enthaltene em-Element in dieser Schrift dargestellt:

<p style="font-family: serif;">The water fountain with the broken sign on it is <em>indeed</em> broken.</p>

Für die Vererbung gibt es mehrere Ausnahmen. Eine ist Teil der CSS-Spezifikation und bezieht sich auf Elemente, die eine Box anlegen können. Elemente wie h2 und p bezeichnet man als Block-Level-Elemente (oder auch einfach nur als Block-Elemente). Diese besitzen teilweise andere Eigenschaften als Inline-Level-Elemente, zum Beispiel Innen- und Außenabstände, Rahmen und Hintergründe (siehe die folgende Abbildung).

Boxmodell für Block-Element

Abbildung: Das Boxmodell für ein Block-Element.

Da diese Eigenschaften nicht an Kindelemente vererbt werden, die zugleich Block-Level-Elemente sind, brauchen Sie keine zusätzlichen Regeln zu definieren, um die möglicherweise auftretenden visuellen Effekte zu verhindern. Hätten Sie ein body-Element beispielsweise mit einem 15% breiten Außenabstand versehen, würde diese Regel auch auf alle h2- und p-Elemente angewendet, die Kindelemente von body sind. Das Resultat der Vererbung dieser Eigenschaften sehen Sie in der nächsten Abbildung.

Hypothetische Darstellung der Vererbung von Eigenschaftswerten für Außenabstände und Rahmen

Abbildung: Hypothetische Darstellung der Vererbung von Eigenschaftswerten für Außenabstände und Rahmen.

Da bestimmte Eigenschaften per Definition vererbt werden können, andere jedoch nicht, sieht die Seite in einem modernen CSS-fähigen Browser eher so aus wie in der folgenden Abbildung.

Darstellung der Seite, wenn Block-Elemente Werte bestimmter Eigenschaften nicht vererben

Abbildung: Darstellung der Seite, wenn Block-Elemente die Werte bestimmter Eigenschaften nicht vererben.

Ein anderer Grund für das mögliche Fehlschlagen der Vererbung kann darin bestehen, dass sich ein Browser nicht an die CSS-Spezifikation hält und die für das body-Element festgelegten Werte für font-family und color nicht an dessen Kindelemente weitergibt. Dieses Problem lässt sich umgehen, indem Sie die Werte für font-family und color für Block-Elemente explizit festlegen:

body {
  font-family: Georgia, Times, "Times New Roman", serif;
  color: #030;
}
h1, h2, h3, h4, h5, h6, p, td, ul, ol, li, dl, dt, dd, {
  font-family: Georgia, Times, "Times New Roman", serif;
  color: #030;
}

Ein weiteres Problem besteht darin, dass Schriftart, -größe und -farbe nicht von allen Browsern in Tabellenzellen vererbt werden. Der Internet Explorer beispielsweise vererbt zwar die Schriftart und die Schriftfarbe in Tabellenzellen, nicht aber die Schriftgröße. Da man sich allerdings selten nur mit Schriftarten begnügt und meist auch die Schriftgröße zuweisen möchte, kann man den CSS-Code folgendermaßen erweitern:

p, td {
  font-family: Georgia, Times, "Times New Roman", serif;
  color: #000;
  font-size: 1.3em;
}

Siehe auch

Die CSS 2.1-Spezifikation zum Thema Vererbung. Genaueres zu den Werten für font-family finden Sie in der CSS 2.1-Spezifikation.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln