XML-Know How

Schriften definieren in CSS

Um Schriftarten anzugeben, gibt es in CSS drei verschiedene Möglichkeiten. Zunächst gibt es die Standardwerte: Hier wird nicht direkt eine Schriftart ausgewählt, sondern lediglich die Schriftgruppe, die verwendet werden soll. Da jeder Browser für jede Schriftgruppe eine Standard-Schrift hinterlegt hat, kann so sichergestellt werden, dass die Darstellung zumindest der Grundintention des Gestalters entspricht.

Info: Die möglichen Standardwerte für Schriftarten lauten

serif

sans-serif

monospace

cursive

fantasy

Die zweite Möglichkeit sind die Systemschriften. Hier wird der Name der Schrift angegeben, die auf dem System installiert ist. Da es eine ganze Reihe von Standard-Schriften gibt, die auf (fast) jedem Rechner vorhanden sind, ist dies eine gute und probate Möglichkeit, die Gestaltung der HTML-Seite zu steuern. Der Gestalter sollte sich dabei allerdings darüber im Klaren sein, dass immer nur die Schriften dargestellt werden können, die auf den Rechnern (Smartphones, Tablet-PCs etc …) der Endanwender installiert sind.

Es ist verführerisch, sich des Schriftenreichtums zu bedienen, der auf dem eigenen Gerät vorhanden ist – das führt aber häufig zu Fehldarstellungen auf dem Zielgerät. Da man nie mit Sicherheit sagen kann, welche Schriften tatsächlich auf dem Zielgerät vorhanden sind, gibt es in CSS die Möglichkeit, mehrere Schriftarten anzugeben (mit Komma getrennt) und somit eine Fallback-Kaskade aufzubauen. Der Rechner wird dann versuchen, die erste angegebene Schrift einzusetzen. Ist diese auf dem Gerät nicht vorhenden, wählt er die zweite usw. Als letzte Schrift in einer solchen Fallback-Kaskade sollte stets ein Standard-Wert angegeben werden, falls keine der ausgewählten Systemschriften geladen werden kann:

Beispiel:

p { font-family: Helvetica, Arial, sans-serif; }

Eine relativ neue Möglichkeit stellt die Einbindung eigener Schriften dar. Es handelt sich um eine CSS 3-Methode – es kann also noch nicht garantiert werden, dass diese Methode von allen Geräten verstanden wird. Deshalb sollte auf jeden Fall auch hier der Fallback auf eine Systemschriftart und/oder einen Standardwert angegeben werden.

Tipp

Des Weiteren sind beim Einbinden eigener Schriften die Lizenz- und Nutzungsbedingungen des jeweiligen Schriftanbieters zu beachten. In aller Regel dürfen lizenzpflichtige Schriften nicht ohne weiteres in elektronische Publikationen eingebunden werden (bzw. es werden dafür eigene Lizenzkosten fällig), da sie aus diesen sehr leicht extrahierbar sind. Es gibt jedoch mittlerweile eine ganze Reihe von ästhetisch ansprechenden, sehr gut ausgebauten Open-Source-Schriften, für die diese Methode gut geeignet ist.

Die Einbindung erfolgt in zwei Schritten. Zunächst wird über @font-face die Schriftart dem System bekannt gegeben, indem ihr ein eindeutiger Name zugewiesen wird. Im Anschluss kann die Schriftart über diesen Namen ebenso im CSS benutzt werden wie Systemschriften auch:

Beispiel:

@font-face {

font-family: DroidSerif;

font-style: normal;

font-weight: normal;

src: url(fonts/DroidSerif-Regular.ttf);

}

p {

font-family: DroidSerif, sans-serif;

}