font-size

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

Die Eigenschaft font-size beschreibt die Schriftgröße in einem HTML-Element. Sie wird entweder absolut oder relativ zur Einstellung des übergeordneten Elements deklariert. Eine absolute Maßangabe wird zum Beispiel in Pixel bzw. Punkt oder mit einer absoluten Konstanten (zum Beispiel x-small) angegeben, die eine von den Browsereinstellungen abhängige Größe beschreibt (zum Beispiel small). Eine relative Angabe erfolgt über die M-Höhe (em), einen Prozentwert oder über eine relative Konstante (zum Beispiel larger oder smaller).

Vererbt: ja. Im Falle von relativen Angaben wird der errechnete Wert vererbt und nicht der Wert als Faktor.

Siehe auch: font

Werte

Die Eigenschaft font erlaubt den Einsatz einer ganzen Reihe verschiedener Formate:

Absolute CSS-Maßangaben

Eine CSS-Maßangabe in Pixel (px), Punkt (pt), Pica (pi), Zentimeter (cm), Millimeter (mm) oder Inch (in).

Absolute Größenkonstanten

Eine der folgenden Konstanten:

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

Die genaue Größendarstellung dieser Konstanten wird vom Browser bestimmt und ist im Mac OS generell kleiner als bei Windows. Die Größe der Schritte zwischen den Konstanten ist ebenfalls vom Browser abhängig, der CSS-Standard schlägt einen Faktor von 20% von einem Wert zum nächsthöheren Wert vor (large sollte 20% größer als medium sein).

Relative CSS-Maßangaben

Eine relative Maßangabe in M-Höhe (em), x-Höhe (ex) oder Prozent (%). Eine solche Angabe berechnet die Schriftgröße relativ zur Schriftgröße des übergeordneten Elements.

Relative Größenkonstanten

Eine der folgenden Konstanten:

  • smaller
  • larger

Die genaue Interpretation dieser Konstanten wird vom Browser bestimmt und ist im Mac OS generell kleiner als bei Windows. Die Größe der Schritte zwischen den Konstanten ist ebenfalls vom Browser abhängig, der CSS-Standard schlägt einen Faktor von 20% von einem Schritt zum nächsthöheren vor. Nach dieser Empfehlung ist die Konstante smaller etwa gleichbedeutend mit der Maßangabe 80% oder 0.8em. Die Konstante larger entspricht somit etwa 120% oder 1.2em.

Standardwert: medium (siehe auch Abschnitt »Kompatibilität«).

Kompatibilität

CSS-Version: 1

Funktioniert in allen CSS-fähigen Browsern.

Im Internet Explorer für Windows (bis Version 6.0) ist die Standardschriftgröße small statt medium. Der Wert medium führt daher zu einer größeren Darstellung als die Standardgröße. Der IE 6.0 korrigiert dieses im »Standards-Compliant Mode«, für alle früheren Versionen ist jedoch ein separates Stylesheet zu erstellen, wenn absolute Konstanten für die Schriftgröße eingesetzt werden sollen.

Beispiel

Folgende Stilregel setzt die Standardschriftgröße für alle Elemente im Dokument auf elf Punkt. Da font-size vererbt wird, erhalten auch zugleich alle Elemente, für die keine eigene font-size deklariert wird, automatisch diesen Wert zugeteilt:

body {
 font-size: 11pt;
}

In der Praxis erlauben viele ältere Browser die Vererbung von Schrifteigenschaften nicht bei allen Elementen (zum Beispiel nicht bei Tabellen), die vorhergehende Stilregel sollte daher noch genauer deklariert werden:

body, p, blockquote, li, td, th, pre {
 font-size: 11pt;
}

Folgende Stilregel veranschaulicht einen Fehler, der häufig von unerfahrenen Entwicklern gemacht wird:

ul, ol {
 font-size: 80%;
}

Da für font-size bei relativen Maßangaben nicht der relative Wert an sich, sondern der bereits für das übergeordnete Element errechnete Wert vererbt wird, wird im letzten Beispiel der Text in HTML-Listen nicht nur 20% kleiner als in body, sondern in verschachtelten Listen nochmals um 20% kleiner als in der übergeordneten Liste dargestellt! Damit wird die Schrift über zwei Schachtelungsebenen hinweg insgesamt 40% kleiner als in body dargestellt und ist kaum noch lesbar. Vermeiden kann man diesen Domino-Effekt mit einer geregelten Vererbung der Schriftgröße in verschachtelten Listenelementen. In Verbindung mit folgender zusätzlicher Stilregel beträgt die Schriftgröße in verschachtelten wie nicht verschachtelten Listen 80% der für body gültigen Schriftgröße:

ul ul, ul ol, ol ul, ol ol {
 font-size: inherit;
}

  

<< zurück vor >>

 

 

 

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

Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" 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.

dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg