font-weight

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Die font-weight-Eigenschaft von CSS legt die Stärke (oder Fettdruck) der Schrift fest. Die verfügbaren Stärken hängen von der derzeit gesetzten font-family ab.

Probieren Sie es aus

font-weight: normal;

font-weight: bold;

font-weight: lighter;

font-weight: bolder;

font-weight: 100;

font-weight: 900;

<section id="default-example">
  <p id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

section {
  font-size: 1.2em;
}

Syntax

css

/* <font-weight-absolute> keyword values */
font-weight: normal;
font-weight: bold;

/* <font-weight-absolute> numeric values [1,1000] */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; /* normal */
font-weight: 500;
font-weight: 600;
font-weight: 700; /* bold */
font-weight: 800;
font-weight: 900;

/* Keyword values relative to the parent */
font-weight: lighter;
font-weight: bolder;

/* Global values */
font-weight: inherit;
font-weight: initial;
font-weight: revert;
font-weight: revert-layer;
font-weight: unset;

Die font-weight-Eigenschaft wird entweder durch einen <font-weight-absolute> Wert oder einen relativen Stärkewert festgelegt, wie unten aufgeführt.

Werte

normal: Normale Schriftstärke. Entspricht 400.
bold: Fette Schriftstärke. Entspricht 700.
<number>: Ein Wert vom Typ <number> zwischen 1 und 1000, beide Werte eingeschlossen. Höhere Zahlen repräsentieren Stärken, die fetter sind als (oder genauso fett wie) niedrigere Zahlen. Dies ermöglicht eine feinkörnige Steuerung für variable Schriften. Für nicht-variable Schriftarten wird, wenn die exakt angegebene Stärke nicht verfügbar ist, ein Fallback-Stärke-Algorithmus verwendet — numerische Werte, die durch 100 teilbar sind, entsprechen gängigen Stärkenamen, wie im Abschnitt über die gemeinsame Zuordnung von Stärkenamen unten beschrieben.
lighter: Eine relative Schriftstärke, die leichter ist als das Elternelement. Beachten Sie, dass für die Berechnung der relativen Stärke nur vier Schriftstärken berücksichtigt werden; siehe den Abschnitt Bedeutung relativer Stärken unten.
bolder: Eine relative Schriftstärke, die schwerer ist als das Elternelement. Beachten Sie, dass für die Berechnung der relativen Stärke nur vier Schriftstärken berücksichtigt werden; siehe den Abschnitt Bedeutung relativer Stärken unten.

Fallback-Stärken

Wenn die exakte angegebene Stärke nicht verfügbar ist, wird folgende Regel angewendet, um die tatsächlich angezeigte Stärke zu bestimmen:

Wenn die Zielstärke zwischen 400 und 500 liegt, einschließlich:
- Suchen Sie nach verfügbaren Stärken zwischen dem Ziel und 500 in aufsteigender Reihenfolge.
- Wenn keine Übereinstimmung gefunden wird, suchen Sie nach verfügbaren Stärken kleiner als das Ziel in absteigender Reihenfolge.
- Wenn keine Übereinstimmung gefunden wird, suchen Sie nach verfügbaren Stärken größer als 500 in aufsteigender Reihenfolge.
Wenn eine Stärke kleiner als 400 angegeben wird, suchen Sie nach verfügbaren Stärken, die kleiner als das Ziel sind, in absteigender Reihenfolge. Wenn keine Übereinstimmung gefunden wird, suchen Sie nach verfügbaren Stärken, die größer als das Ziel sind, in aufsteigender Reihenfolge.
Wenn eine Stärke größer als 500 angegeben wird, suchen Sie nach verfügbaren Stärken, die größer als das Ziel sind, in aufsteigender Reihenfolge. Wenn keine Übereinstimmung gefunden wird, suchen Sie nach verfügbaren Stärken, die kleiner als das Ziel sind, in absteigender Reihenfolge.

Hinweis: Der Fallback-Stärken-Algorithmus wird nur für die Anzeige verwendet. Der berechnete Wert der Eigenschaft bleibt der angegebene Wert.

Bedeutung relativer Stärken

Wenn lighter oder bolder angegeben wird, zeigt die untenstehende Tabelle, wie die absolute Schriftstärke des Elements bestimmt wird.

Beachten Sie, dass bei der Verwendung relativer Stärken nur vier Schriftstärken berücksichtigt werden — dünn (100), normal (400), fett (700) und schwer (900). Wenn eine Schriftartfamilie mehr Stärken zur Verfügung hat, werden sie für die Berechnung der relativen Stärke ignoriert.

Geerbter Wert	`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

Gemeinsame Zuordnung von Stärkenamen

Die numerischen Werte 100 bis 900 entsprechen grob den folgenden gängigen Stärkenamen (siehe die OpenType-Spezifikation):

Wert	Gängiger Stärkename
100	Dünn (Haarlinie)
200	Extralicht (Ultraleicht)
300	Licht
400	Normal (Regulär)
500	Mittel
600	Halbfett (Demi Bold)
700	Fett
800	Extrafett (Ultrabold)
900	Schwarz (Schwer)
950	Extrablack (Ultra Black)

Variable Schriften

Während viele Schriftarten eine bestimmte Stärke haben, die einer der Nummern in der gemeinsamen Zuordnung von Stärkenamen entspricht, unterstützen die meisten variablen Schriftarten einen Bereich von Stärken, die eine viel feinere Granularität bieten, was Designern und Entwicklern mehr Kontrolle über die gewählte Stärke gibt.

Für TrueType- oder OpenType-variablen Schriftarten wird die "wght"-Variation verwendet, um unterschiedliche Breiten umzusetzen.

Diese Demo lädt mit font-weight: 500; gesetzt. Ändern Sie den Wert der font-weight-Eigenschaft im .sample Selektor, um die Stärke des Textes zu sehen (z.B. 200, 700). Klicken Sie auf "Play" in den untenstehenden Codeblöcken, um das Beispiel im MDN Playground zu bearbeiten:

html

<p class="sample">
  ...it would not be wonderful to meet a Megalosaurus, forty feet long or so,
  waddling like an elephantine lizard up Holborn Hill.
</p>

css

@font-face {
  src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/MutatorSans.ttf");
  font-family: "MutatorSans";
  font-style: normal;
  font-weight: 1 1000;
}

.sample {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 1.5rem;
  font-family: "MutatorSans", sans-serif;
}

Barrierefreiheit

Menschen mit Sehbehinderungen könnten Schwierigkeiten haben, Text zu lesen, der mit einem font-weight-Wert von 100 (Dünn/Haarlinie) oder 200 (Extralicht) gesetzt ist, besonders wenn die Schrift ein geringes Kontrastverhältnis hat.

Formale Definition

Anfangswert	`normal`
Anwendbar auf	all elements and text. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Ja
Berechneter Wert	das Schlüsselwort oder der numerische Wert wie angegeben, wobei `bolder` und `lighter` in einen realen Wert umgewandelt werden
Animationstyp	by computed value type

Formale Syntax

font-weight = 
  <font-weight-absolute>  |
  bolder                  |
  lighter                 

<font-weight-absolute> = 
  normal             |
  bold               |
  <number [1,1000]>

Beispiele

Festlegen von Schriftstärken

HTML

html

<p>
  Alice was beginning to get very tired of sitting by her sister on the bank,
  and of having nothing to do: once or twice she had peeped into the book her
  sister was reading, but it had no pictures or conversations in it, "and what
  is the use of a book," thought Alice "without pictures or conversations?"
</p>

<div>
  I'm heavy<br />
  <span>I'm lighter</span>
</div>

CSS

css

/* Set paragraph text to be bold. */
p {
  font-weight: bold;
}

/* Set div text to two steps heavier than
   normal but less than a standard bold. */
div {
  font-weight: 600;
}

/* Set span text to be one step lighter
   than its parent. */
span {
  font-weight: lighter;
}

Ergebnis

Spezifikationen

Specification
CSS Fonts Module Level 4 # font-weight-prop

Browser-Kompatibilität

Siehe auch

font-family
font-style
SVG-Attribut font-weight
Lernen: Grundlegende Text- und Schriftstile
CSS-Schriftarten Modul

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Geerbter Wert	`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

Geerbter Wert	`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

Geerbter Wert	`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