font-weight
Übersicht
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 |
Syntax
Formal syntax:<font-weight-absolute> | bolder | lighter
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
Werte
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.
Näherungsverfahren
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):
- Verwende die erste Stärke, die größer als die gewünschte, aber kleiner als 500 ist.
- Ist keine verfügbar, verwende die erste Stärke die kleiner als die gewünschte ist.
- 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.
Die Bedeutung relativer Angaben
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 |
Zuordnung von Namen und Werten
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) |
Variable Schriftarten
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.
Beispiel
<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;
}
Spezifikation
Spezifikation | Status | Anmerkung |
---|---|---|
CSS Fonts Module Level 3 Die Definition von 'font-weight' in dieser Spezifikation. |
Empfehlung | Keine Änderung |
CSS Transitions Die Definition von 'font-weight' in dieser Spezifikation. |
Arbeitsentwurf | font-weight ist animierbar |
CSS Level 2 (Revision 1) Die Definition von 'font-weight' in dieser Spezifikation. |
Empfehlung | Keine Änderung |
CSS Level 1 Die Definition von 'font-weight' in dieser Spezifikation. |
Empfehlung |
Browserkompatibilität
BCD tables only load in the browser