font-weight

Die CSS-Eigenschaft font-weight definiert die Stärke der Schrift. Einige Schriftarten sind jedoch nicht in allen Werten verfügbar und unterstützen nur die Werte normal und bold.

Initialwert	normal
Anwendbar auf	alle Elemente. Auch anwendbar auf ::first-letter (en-US) und ::first-line (en-US).
Vererbt	Ja
Berechneter Wert	das Schlüsselwort oder der numerische Wert wie angegeben, wobei bolder und lighter in einen realen Wert umgewandelt werden
Animationstyp	Schriftgewichtung

Formal syntax: 
<font-weight-absolute> | bolder | lighter
wobei 
<font-weight-absolute> = normal | bold | [1,1000]>

font-weight: normal
font-weight: bold

font-weight: lighter
font-weight: bolder

font-weight: 100
font-weight: 200
font-weight: 300
font-weight: 400
font-weight: 500
font-weight: 600
font-weight: 700
font-weight: 800
font-weight: 900

font-weight: inherit

normal

Normale Stärke, entspricht 400.

bold

Fette Schrift, entspricht 700.

lighter

Eine Stufe dünner als das Elternelement (siehe Die Bedeutung relativer Angaben unten).

bolder

Eine Stufe fetter als das Elternelement (siehe Die Bedeutung relativer Angaben unten).

<number>

Eine Zahl (<number>) zwischen 1 und 1000 (einschließlich). Größere Werte stehen für eine fettere oder gleich fette Darstellung als kleinere Werte.

Frühere Spezifikationen erlaubten für font-weight nur die Schlüsselworte sowie die Werte 100 bis 1000 in Hunderterschritten. Nicht-variable Schriftarten können nur mit diesen Werten arbeiten, feinere Abstimmungen werden jedoch mit den festgelegten Werte angenähert.

Die Spezifikation CSS Fonts Level 4 nimmt variable Schriftarten im Format TrueType und OpenType auf. Mit diesen sind grundsätzlich beliebig feine Abstimmungen möglich.

Ist die gewählte Stärke nicht verfügbar, bestimmen die nachfolgenden Schritte die Darstellung:

• Liegt die gewünschte Stärke zwischen 400 und 500 (einschließlich):
  1. Verwende die erste Stärke, die größer als die gewünschte, aber kleiner als 500 ist.
  2. Ist keine verfügbar, verwende die erste Stärke die kleiner als die gewünschte ist.
  3. Ist keine verfügbar, verwende die erste Stärke größer als 500.
• Liegt die gewünschte Stärke unter 400, verwende die erste Stärke kleiner als die gewünschte. Ist keine verfügbar, verwende die erste Stärke größer als die gewünschte.
• Liegt die gewünschte Stärke über 500, verwende die erste Stärke größer als die gewünschte. Ist keine verfügbar, verwende die erste Stärke kleiner als die gewünschte.

Bei der Angabe von lighter und bolder bestimmt die nachfolgende Tabelle die tatsächliche Schriftstärke. Zu beachten ist, dass hierbei nur vier Abstufungen verfügbar sind, fein (100), normal (400), fett (700) und schwarz (900).

Gegeben	bolder	lighter
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

Die Werte 100 bis 900 entsprechen ungefähr den nachfolgenden Bezeichnungen (siehe OpenType-Spezifikation und Wikipedia-Artikel zur Schriftstärke):

Wert	Deutsch	Englisch
100	fein	Thin (Hairline)
200	extraleicht	Extra Light (Ultra Light)
300	leicht	Light
400	normal	Normal (Regular)
500	medium	Medium
600	halbfett	Semi Bold (Demi Bold)
700	fett	Bold
800	extrafett	Extra Bold (Ultra Bold)
900	schwarz	Black (Heavy)
950	extraschwarz	Extra Black (Ultra Black)

Die meisten Schriftarten stellen nur einige festgelegte Breiten zur Verfügung. Variable Schriftarten unterstützen hingegen eine Vielzahl von Breiten in mehr oder weniger feiner Abstufung.

Bei variablen Schriftarten vom Typ TrueType und OpenType korrespondiert deren Eigenschaft "wght" mit der CSS-Eigenschaft font-weight und wird von Browsern – sofern unterstützt –  entsprechend eingesetzt.

<p>
  Alice fing an sich zu langweilen; sie saß schon
  lange bei ihrer Schwester am Ufer und hatte nichts
  zu tun. Das Buch, das ihre Schwester las, gefiel
  ihr nicht, denn es waren weder Bilder noch Gespräche
  darin. »Und was nützen Bücher,« dachte Alice,
  »ohne Bilder und Gespräche?«
</p>

<div>Ich bin breiter.<br/>
  <span>Ich bin schmaler.</span>
</div>

/* Absatz soll breiter sein. */
p {
  font-weight: bold;
}

/* Der Text im div soll zwei Schritte breiter
   als normal sein, aber nicht so breit wie
   ein normales breit (bold). */
div {
 font-weight: 600;
}

/* Der Text im span soll einen Schritt schmaler
   sein als jener seines Elternelements. */
span {
  font-weight: lighter;
}