Die zusammenfassende font-Eigenschaft

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Mit der Eigenschaft font lassen sich alle Schrifteigenschaften in einer einzigen CSS-Stilregel zusammenfassen. Wie bei anderen zusammenfassenden Eigenschaften auch, werden die verschiedenen Werte durch Leerstellen getrennt. Bei der Aufzählung alternativer Werte wie bei font-family werden Kommata eingesetzt. Eine etwas komplexere Stilregel mit font sieht zum Beispiel so aus:

Die Werte für Schriftgröße und Schriftfamilie werden einfach hintereinander aufgelistet und sollten exakt in dieser Reihenfolge am Ende der Deklaration angegeben werden. Die oben beschriebene CSS-Regel erzeugt das Resultat in der folgenden Abbildung.

Abbildung: Serifenlose, strichstarke Überschrift mit Kapitälchen in Schriftgröße von 22 Punkt.

Neben der einfachen Zusammenfassung der Schrifteigenschaften bietet font noch einige Extrafunktionen: Auch die Zeilenhöhe (line-height) kann man mit ihr festlegen. Schreiben Sie dafür einfach einen Schrägstrich hinter die Angabe der Schriftgröße und setzen Sie einen gültigen Wert dahinter. Mit line-height werden wir uns noch ausgiebiger unter Die line-height-Eigenschaft beschäftigen. Hier nur ein kurzes Beispiel:

Diese Stilregel weist den Browser an, p-Absätze in einer 12 Punkt großen, serifenlosen Schrift in Kapitälchen darzustellen und zusätzlich die Zeilenhöhe zu verdoppeln. In den folgenden beiden Abbildungen sehen Sie den Effekt.

Abbildung: Schrift ohne zusätzlich definierte Zeilenhöhe.

Abbildung: Schrift mit einer Zeilenhöhe, die der doppelten M-Höhe entspricht.

Wie schon bei den Farbeigenschaften ist es mit CSS2 auch bei den Schrifteigenschaften möglich, sich auf die Grundeinstellungen im Betriebssystem des Benutzers zu beziehen. Diese Konstanten sind nützlich, wenn Sie Benutzerschnittstellen entwickeln, die Sie den Erwartungen der Benutzer, bezogen auf ihren Browser und ihr Betriebssystem, anpassen möchten. Diese Konstanten greifen auf die Schrifteinstellungen des Browsers oder Betriebssystems zurück und bestimmen so das Aussehen der Schriften. Die entsprechenden Werte werden der zusammenfassenden Stilregel font zugeordnet, weil sie selbst eine besondere Kombination mehrerer Schrifteigenschaften darstellen. Zur Verfügung stehen sieben Werte:

• caption
• icon
• menu
• message-box
• small-caption
• status-bar

Bevor Sie diese Werte einsetzen, sollten Sie erst unter Referenz der CSS-Eigenschaften nachlesen, von welchen Browsern sie unterstützt werden. Auch hier sind einige CSS-Implementationen lückenhaft.