CSS 2.1: font-weight

Erlaubte Werte

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

'font-weight' normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

CSS 2.1 leitet die Unterschiede zwischen den Schlüsselworten aus den Zahlenwerten ab. In der Praxis gibt es aber bis heute kaum eine Schriftart, die in 9 verschiedenen Gewichten existiert. Diese Zahlenwerte sind praktisch ein Umweg, auf dem die Schriftartbezeichnungen in die Schlüsselworte überführt werden. Deshalb sollen hier zum besseren Verständnis zuerst die Integerwerte erläutert werden, die Beschreibung der Schlüsselworte folgt dann weiter unten.

Einer der Werte 100, 200, 300, 400, 500, 600, 700, 800 oder 900

Aufsteigende geordnete Sequenz, in der jeder Wert für eine Schriftgewichtung steht, die gleich oder dicker der seinem Vorgänger zugeordneten Schriftgewichtung ist. Meistens werden Schriftarten mit Bezeichnungen wie 'Regular', 'Roman', 'Book', 'SemiBold', 'Black' oder ähnlichem bezeichnet. Diese Namen haben jedoch keine universelle Bedeutung, sondern dienen nur dazu, den Unterschied in der Schriftgewichtung zu dokumentieren. Das folgende Schema dient dazu, diese Benennungen der neunstufigen numerischen Skala zuzuordnen (falls die Schriftart nicht bereits mit einer neunstufigen und numerischen Skala arbeitet.):

• Eine Schriftart mit der Bezeichnung 'Book', 'Regular', 'Roman', 'Normal' oder 'Medium' wird mit dem Wert 400 gleichgesetzt.
• Ist sowohl eine Schriftart mit der Bezeichnung 'Book', 'Regular', 'Roman', 'Normal' als auch eine andere mit der Bezeichnung 'Medium' vorhanden, wird die letztere dem Wert 500 zugeordnet.
• 

  Schriftgewicht und Schriftglättung am
  Beispiel eines 8 Pixel hohen Textes:
  li.: font-weight:normal, re.: bold,
  v. o. n. u.: Mozilla 1.7, IE 6, Opera 7.5,
  Bildbearbeitung ohne Glättung,
  Bildbearbeitung mit Glättung
  (ohne MS ClearType)

• Ist eine Schriftart mit der Bezeichnung 'Bold' vorhanden, wird diese dem Wert 700 zugeordnet.
• Sind in der Schriftfamilie weniger als 9 Schriftarten unterschiedlicher Schriftgewichte vorhanden, werden die noch vorhandenen Lücken mit folgendem Algorithmus aufgefüllt:
  • Ist mit dem Wert 500 noch keine Schriftgewichtung assoziiert, wird ihm dieselbe Schriftgewichtung wie dem Wert 400 zugeordnet.
  • Noch freie Werte aus dem Bereich 600, 700, 800 und 900 werden der Schriftart mit der nächsten 'fetteren' Benennung zugeordnet.
  • Ist keine Schriftart mit einer nächst-'fetteren' Benennung vorhanden, wird auf die nächst-'dünnere' ausgewichen.
  • Dann werden die noch verbleibenden Werte 100, 200 und 300, falls noch nicht assoziiert, der nächst-'dünneren' Schriftart zugeordnet.
  • Ist keine Schriftart mit einer nächst-'dünneren' Benennung vorhanden, wird auf die nächst-'fettere' ausgewichen.

normal (Ausgangswert)

Dieser Wert ist gleichgesetzt mit 400.

bold

Dieser Wert ist gleichgesetzt mit 700.

bolder

Schriftgewicht ist abhängig vom Elternelement; Text wird eine Stufe stärker als der ererbte Wert ausgegeben. Weiter vererbt wird das Ergebnis der Berechnung, nicht das Schlüsselwort.

lighter

Schriftgewichtung ist abhängig vom Elternelement; Text wird eine Stufe dünner als der ererbte Wert ausgegeben. Weiter vererbt wird das Ergebnis der Berechnung, nicht das Schlüsselwort.

inherit

Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Angenommen, für den Font StyleWorks sind die Schriftarten StyleWorks Roman, StyleWorks Bold, StyleWorks Black, StyleWorks Light und StyleWorks Medium vorhanden. Diese würden dann, wenn man sie verwendet, den Zahlenwerten und Schlüsselworten folgendermaßen zugeordnet:

Code-Beispiel:

H2 { font-weight: 400; }

Wechselwirkungen:

font, font-style, font-variant, 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. font-weight ist die einzige der font-Eigenschaften, die von den Mobilgeräten tatsächlich umgesetzt wird.

Weitere Charakteristika:

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