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 July 2015.

Die font-weight CSS Eigenschaft legt die Stärke (oder Fetter) der Schriftart fest. Die verfügbaren Stärken hängen von der aktuell eingestellten 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 Eigenschaft font-weight wird entweder mit einem <font-weight-absolute>-Wert oder einem relativen Gewichtswert angegeben, wie unten aufgeführt.

Werte

normal: Normales Schriftgewicht. Entspricht 400.
bold: Fettschrift-Gewicht. Entspricht 700.
<number>: Ein <number> Wert zwischen 1 und 1000, einschließlich beider Werte. Höhere Zahlen stehen für Gewichtungen, die fetter sind als (oder so fett wie) niedrigere Zahlen. Dies ermöglicht eine feingranulare Steuerung für variable Schriften. Für nicht variable Schriften wird, wenn das exakt angegebene Gewicht nicht verfügbar ist, ein Fallback-Gewicht Algorithmus verwendet — numerische Werte, die durch 100 teilbar sind, entsprechen den üblichen Gewichtsnamen, wie im Abschnitt Zuordnung von gebräuchlichen Gewichtsnamen unten beschrieben.
lighter: Ein relatives Schriftgewicht, das leichter ist als das Elternelement. Beachten Sie, dass nur vier Schriftgewichte für die Berechnung relativer Gewichte betrachtet werden. Weitere Informationen finden Sie im Abschnitt Bedeutung relativer Gewichte unten.
bolder: Ein relatives Schriftgewicht, das schwerer ist als das Elternelement. Beachten Sie, dass nur vier Schriftgewichte für die Berechnung relativer Gewichte betrachtet werden. Weitere Informationen finden Sie im Abschnitt Bedeutung relativer Gewichte unten.

Fallback-Gewichte

Wenn das genaue angegebene Gewicht nicht verfügbar ist, wird die folgende Regel verwendet, um das tatsächlich dargestellte Gewicht zu bestimmen:

Wenn das angegebene Zielgewicht zwischen 400 und 500 einschließlich liegt:
- Suchen Sie nach verfügbaren Gewichten zwischen dem Ziel und 500 in aufsteigender Reihenfolge.
- Wenn keine Übereinstimmung gefunden wird, suchen Sie nach verfügbaren Gewichten, die kleiner sind als das Ziel, in absteigender Reihenfolge.
- Wenn keine Übereinstimmung gefunden wird, suchen Sie nach verfügbaren Gewichten, die größer als 500 sind, in aufsteigender Reihenfolge.
Wenn ein Gewicht kleiner als 400 angegeben wird, suchen Sie nach verfügbaren Gewichten, die kleiner sind als das Ziel, in absteigender Reihenfolge. Wenn keine Übereinstimmung gefunden wird, suchen Sie nach verfügbaren Gewichten, die größer als das Ziel sind, in aufsteigender Reihenfolge.
Wenn ein Gewicht größer als 500 angegeben wird, suchen Sie nach verfügbaren Gewichten, die größer sind als das Ziel, in aufsteigender Reihenfolge. Wenn keine Übereinstimmung gefunden wird, suchen Sie nach verfügbaren Gewichten, die kleiner sind als das Ziel, in absteigender Reihenfolge.

Hinweis: Der Fallback-Gewichtsalgorithmus wird nur für die Darstellung verwendet. Der berechnete Wert der Eigenschaft ist weiterhin der angegebene Wert.

Bedeutung relativer Gewichte

Wenn lighter oder bolder angegeben wird, zeigt das unten stehende Diagramm, wie das absolute Schriftgewicht des Elements bestimmt wird.

Beachten Sie, dass bei der Verwendung relativer Gewichte nur vier Schriftgewichte betrachtet werden — dünn (100), normal (400), fett (700) und schwer (900). Wenn eine Schriftfamilie mehr Gewichte zur Verfügung hat, werden diese für die Berechnung relativer Gewichte 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

Zuordnung von gebräuchlichen Gewichtsnamen

Die numerischen Werte 100 bis 900 entsprechen in etwa den folgenden gebräuchlichen Gewichtsnamen (siehe die OpenType-Spezifikation):

Wert	Gebräuchlicher Gewichtname
100	Dünn (Haarfein)
200	Extra-Licht (Ultra-Licht)
300	Licht
400	Normal (Regulär)
500	Mittel
600	Halbfett (Demi Bold)
700	Fett
800	Extra-Fett (Ultra-Fett)
900	Schwarz (Schwer)
950	Extra-Schwarz (Ultra-Schwarz)

Variable Schriften

Während viele Schriften ein bestimmtes Gewicht haben, das einem der Zahlen im Abschnitt Zuordnung von gebräuchlichen Gewichtsnamen entspricht, unterstützen die meisten variablen Schriften eine Reihe von Gewichten, die eine viel feinere Granularität bieten, sodass Designer und Entwickler mehr Kontrolle über das gewählte Gewicht haben.

Für TrueType- oder OpenType-Variable-Schriften wird die "wght"-Variation verwendet, um unterschiedliche Breiten zu implementieren.

Dieses Demo wird mit font-weight: 500; geladen. Ändern Sie den Wert der font-weight-Eigenschaft im .sample-Selektor, um das Gewicht des Textes zu ändern (z.B. 200, 700). Klicken Sie auf "Play" in den Codeblöcken unten, 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önnen Schwierigkeiten beim Lesen von Text mit einem font-weight-Wert von 100 (Dünn/Haarfein) oder 200 (Extra-Licht) haben, insbesondere wenn die Schrift eine geringe Kontrastfarbe 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	Schriftgewichtung

Formale Syntax

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

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

Beispiele

Festlegen von Schriftgewichten

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-font-weight Attribut
Lernen: Grundlegendes Text- und Schriftstyling
CSS-Schriften Modul

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