Schriftgrößen und -maße festlegen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie wollen die in einer Webseite verwendete Schriftgröße festlegen.

Lösung

Definieren Sie die nötigen Werte mit Hilfe der Eigenschaft font-size:

p {
  font-size: 0.9em;
}

Diskussion

Für die Eigenschaft font-size können verschiedene Arten von Werten und Maßeinheiten zugewiesen werden. In dieser Lösung verwenden wir em-Einheiten. Andere Einheiten, wie z.B. Prozentangaben, sind möglich.

Wenn Sie die Schriftgröße anhand von Prozentwerten festlegen, berechnet der Browser die Größe basierend auf der Größe des Elternelements. Wurde die Schriftgröße für body beispielsweise auf 12 Pixel gesetzt und die Größe des p-Elements auf 125%, so wird der Absatztext 15 Pixel groß dargestellt.

Die Schriftgröße lässt sich mit Hilfe von Prozent- und Längeneinheiten sowie mit speziellen Schlüsselwörtern festlegen. (Anmerkung: Bei der Angabe mancher Maßeinheiten sind auch Nachkommastellen erlaubt, z.B. 0.1em. Beachten Sie hierbei, dass statt des Kommas der englische Dezimalpunkt (.) verwendet werden muss.)

Längeneinheiten

Prinzipiell unterscheidet man zwischen absoluten und relativen Längeneinheiten. Zu den absoluten Längeneinheiten gehören:

  • Inches (in; Zoll)
  • Zentimeter (cm)
  • Millimeter (mm)
  • Punkte (pt)
  • Pica (pc)

Nach der CSS-Spezifikation entspricht ein Punkt 1/72 eines Inches; ein Pica entspricht 12 Punkten.

Relative Längeneinheiten

Relative Längeneinheiten bestimmen die Länge einer Eigenschaft basierend auf dem Wert einer anderen Eigenschaft, die eine bestimmte Länge definiert. Hierzu gehören die folgenden Längeneinheiten:

  • em-Einheiten (em)
  • X-Höhe (ex)
  • Pixel (px)

em-Einheiten beziehen sich auf die Standardschriftgröße, die in den Voreinstellungen des Browsers festgelegt ist. Die x-Höhe (ex) bezieht sich auf die Höhe des kleingeschriebenen Buchstabens x des betreffenden Zeichensatzes.

Als Pixel bezeichnet man den kleinstmöglichen Punkt, der auf einem Computerbildschirm dargestellt werden kann.

Schriftgrößen mit dem Wert null oder mit negativen Werten

In der CSS-Spezifikation wird nicht darauf eingegangen, wie Browser Text behandeln sollen, wenn für die Eigenschaft font-size der Wert null festgelegt wurde. Aus diesem Grund lässt sich nicht vorhersagen, wie diese Werte jeweils interpretiert werden.

In Browsern der Firefox- oder Mozilla-Familie ist so definierter Text beispielsweise nicht sichtbar. Im Internet Explorer für Macintosh und in Safari wird der Text stattdessen mit dem Standardwert für Schriftgrößen dargestellt. Opera stellt den Text wiederum kleiner, aber immer noch lesbar, dar. Internet Explorer für Windows stellt den Text zwar dar, dies jedoch so klein, dass er nur als winzige, unlesbare Linie erscheint, die einem Wert von 0.1em entspricht (siehe folgende Abbildung).

Ist Schriftgröße null, zeigt Internet Explorer für Windows eine unlesbare Textzeile an

Abbildung: Wird die Schriftgröße auf null gesetzt, zeigt Internet Explorer für Windows eine unlesbare Textzeile an.

Wenn Sie Text unsichtbar machen wollen, benutzen Sie hierfür besser die Eigenschaften visibility oder display, anstatt die Schriftgröße auf null zu setzen.

p {
  display: none;
}

Negative Längenangaben für die Eigenschaft font-size, wie -25cm, sind nicht erlaubt.

Siehe auch

Die CSS 2.1-Spezifikation zur Eigenschaft font-size.

  

<< 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