CSS font – Referenz, Beispiel und Labor

stylesheet.css · font

.probe {
  font: italic bold 18px/1.4 Georgia, serif;
}

Dies ist der 1. Absatz. Er steht in einer Box, deren Stil die Regel links oben bestimmt.

berechneter Wertfont: italic bold 18px/1.4 Georgia, serif

Box-Breite–

Box-Höhe–

Erläuterungen

Wer aus der Druckbranche oder vom DTP zum Webdesign gekommen ist, dem sind Begriffe wie Font, Typeface oder Schriftbild sicher geläufig. CSS 2.1 verwendet zur Schriftgestaltung die Eigenschaft font. Sie ist eine Kurzschriftdefinition der einzelnen Eigenschaften font-style, font-variant, font-weight, font-size, line-height und font-family. Deklariert man font, werden, wie bei allen anderen Kurzschrift- Eigenschaften auch, zunächst die einzelnen Eigenschaften auf ihre Ausgangswerte zurückgesetzt und danach die notierten Wertangaben gesetzt. Das bedeutet, dass alle einzelnen Eigenschaften, die innerhalb einer font-Deklaration nicht definiert werden, ihre Ausgangswerte erhalten.

Font ist aber mehr als nur die Summe seiner einzelnen Eigenschaften. Mit font haben wir auch die Möglichkeit, Systemfonts zu deklarieren. Systemfonts lassen sich nur als ganzes definieren, d. h. sie können nur mit font, nicht aber mit einzelnen Eigenschaften, wie z. B. font-family, angesprochen werden. Systemfonts und einzelne Eigenschaften können jedoch in derselben Regel auftreten.

Tipps:

Wenn man einzelne Eigenschaften von Systemfonts verändern will, definiert man zuerst den Systemfont und ändert dann mit einer zweiten Regel die gewünschte Eigenschaft.

Es ist vorteilhaft, anstelle der einzelnen Eigenschaften wann immer möglich die entsprechenden Kurzschrift- Eigenschaften zu verwenden. Dadurch werden die notierten Regeln übersichtlicher und kompakter. Man sollte dabei aber im Hinterkopf behalten, dass alle nicht deklarierten einzelnen Eigenschaften auf ihre Ausgangswerte zurückgesetzt werden.

font-size-adjust und font-stretch sind nicht Teil der Eigenschaft font und müssen extra deklariert werden. Dennoch werden sie durch die Eigenschaft font auf ihre Ausgangswerte zurückgesetzt.

Bei der Definition der individuellen Eigenschaften ist syntaktisch folgendes zu beachten:

Die drei Werte font-style, font-variant und font-weight können nach Belieben vorhanden sein.
font-size und font-family müssen immer angegeben werden.
Wenn man eine Zeilenhöhe definieren will, muss line-height neben font-size, durch ein '/' abgetrennt, notiert werden. Es ist nicht möglich, nur eine Zeilenhöhe zu definieren, aus der der Browser dann die dazu passende Schrifthöhe errechnen soll. Wenn man nur einen Wert von beiden definiert, interpretiert der Browser ihn als font-size.

Anders als bei der Kurzschrift- Eigenschaft background kann hier also nicht jede beliebige Kombination der einzelnen Eigenschaften notiert werden.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'font'
[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]?
<'font-size'> [ / <'line-height'> ]? <'font-family'> ]
| caption | icon | menu | message-box | small-caption | status-bar | inherit

Reguläre Werte:
<font-style>: Textneigung
<font-variant>: Kapitälchen
<font-weight>: Schriftstärke
<font-size>: Schriftgröße
<line-height>: Zeilenhöhe
<font-family>: Schriftfamilie
Systemfonts:: Die folgenden Werte gelten nur für Systemfonts. Bei der Verwendung dieser Werte ist Vorsicht geboten, denn nicht alle Werte sind auf jeder Plattform verfügbar. In dem Fall bleibt es laut Standard dem Browser überlassen, den im System fehlenden Wert 'intelligent' zu ersetzen. Deshalb sollte man unbedingt auf allen Sytemen testen.
caption: Systemfont, der für Buttons, Drop-Downs usw. benutzt wird.
icon: Systemfont, der für Icons benutzt wird.
menu: Systemfont, der für Menüs benutzt wird.
message-box: Systemfont, der für Dialogboxen benutzt wird.
small-caption: Systemfont, der für Kleine Erklärungen (ToolTips) benutzt wird.
status-bar: Systemfont, der für die Statuszeile des Systems benutzt wird.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel

Dieses Beispiel zeigt eine vollständige Fontdeklaration:

p { font:
   bold
   italic
   small-caps
   x-large/110%
   "new century schoolbook",
   serif }

Im folgenden Beispiel wird die für Menüs voreingestellte Schriftart in einer geänderten Schriftgröße verwendet:

p { font:menu; font-size:16px; }

Browserunterstützung

: Die Eigenschaft font werden von allen modernen Browsern unterstützt, auf Einschränkungen wird bei den Einzeleigenschaften hingewiesen.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen

font-style, font-variant, font-weight, font-size, line-height, font-family

Besonderheiten im Medientyp `handheld`

Diese Eigenschaft ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1.

Weitere Charakteristika

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangswert: Siehe bei den individuellen Eigenschaften
Berechneter Wert: Siehe bei den individuellen Eigenschaften
Vererbung: Ja
Anwendbarkeit: Auf alle Elemente
%-Bezugswert: Erlaubt für font-size und line-height
Mediengruppe(n): Visual

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.

CSS-Eigenschaft font