font-weight

/* <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 mit einem <font-weight-absolute> Wert oder einem relativen Gewichtswert angegeben, wie unten aufgeführt.

normal

Normale Schriftstärke. Entspricht 400.

bold

Fette Schriftstärke. Entspricht 700.

<number>

Ein <number> Wert zwischen 1 und 1000, einschließlich beider Werte. Höhere Zahlen stehen für Stärken, die kräftiger sind als (oder genauso kräftig wie) niedrigere Zahlen. Dies ermöglicht eine Feinsteuerung für variable Schriften. Für nicht-variable Schriften wird, falls das genau angegebene Gewicht nicht verfügbar ist, ein Ersatzgewicht Algorithmus verwendet — numerische Werte, die durch 100 teilbar sind, entsprechen gebräuchlichen Gewichtsnamen, wie im Abschnitt Allgemeine Gewichtsnamen-Zuordnung unten beschrieben.

lighter

Eine relative Schriftstärke leichter als das übergeordnete Element. Beachten Sie, dass nur vier Schriftstärken für die Berechnung des relativen Gewichts berücksichtigt werden; siehe den Abschnitt Bedeutung relativer Gewichte unten.

bolder

Eine relative Schriftstärke schwerer als das übergeordnete Element. Beachten Sie, dass nur vier Schriftstärken für die Berechnung des relativen Gewichts berücksichtigt werden; siehe den Abschnitt Bedeutung relativer Gewichte unten.

Wenn das angegebene Gewicht nicht verfügbar ist, wird die folgende Regel zur Bestimmung des tatsächlich angezeigten Gewichts verwendet:

• 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 kein Treffer gefunden wird, suchen Sie nach verfügbaren Gewichten unterhalb des Ziels in absteigender Reihenfolge.
  • Wenn kein Treffer gefunden wird, suchen Sie nach verfügbaren Gewichten über 500 in aufsteigender Reihenfolge.

• Wenn ein Gewicht unter 400 angegeben wird, suchen Sie nach verfügbaren Gewichten unterhalb des Ziels in absteigender Reihenfolge. Wenn kein Treffer gefunden wird, suchen Sie nach verfügbaren Gewichten über dem Ziel in aufsteigender Reihenfolge.

• Wenn ein Gewicht über 500 angegeben wird, suchen Sie nach verfügbaren Gewichten über dem Ziel in aufsteigender Reihenfolge. Wenn kein Treffer gefunden wird, suchen Sie nach verfügbaren Gewichten unterhalb des Ziels in absteigender Reihenfolge.

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

Beachten Sie, dass bei der Verwendung relativer Gewichte nur vier Schriftstärken berücksichtigt werden — dünn (100), normal (400), fett (700) und schwer (900). Wenn eine Schriftfamilie mehr Gewichtsoptionen hat, werden diese bei der Berechnung des relativen Gewichts ignoriert.

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

Während viele Schriften ein bestimmtes Gewicht haben, das einer der Zahlen in Allgemeine Gewichtsnamen-Zuordnung entspricht, unterstützen die meisten variablen Schriften einen Gewichtsbereich, der eine viel feinere Granularität bietet und Designern und Entwicklern mehr Kontrolle über das gewählte Gewicht gibt.

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

Dieses Demo lädt mit font-weight: 500; eingestellt. Ä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 unten stehenden Codeblöcken, um das Beispiel im MDN Playground zu bearbeiten:

<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>

@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:
    1.5rem "MutatorSans",
    sans-serif;
}

Personen mit eingeschränktem Sehvermögen können Schwierigkeiten haben, Text zu lesen, der auf einen font-weight-Wert von 100 (Thin/Haarline) oder 200 (Extra Light) gesetzt ist, insbesondere wenn die Schriftart ein niedriges Kontrastfarbverhältnis hat.

• MDN Verständnis von WCAG, Richtlinie 1.4 Erklärungen
• Verstehen des Erfolgskriteriums 1.4.8 | W3C Verständnis von WCAG 2.0

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

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

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

/* 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

• font-family
• font-style
• Lernen: Grundlegende Text- und Schriftgestaltung
• CSS fonts Modul