Diefont-weightCSS Eigenschaft legt die Stärke (oder Fettigkeit) der Schriftart fest. Die verfügbaren Stärken hängen von der aktuell festgelegtenfont-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>  <p>    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

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

Diefont-weight Eigenschaft wird entweder durch einen<font-weight-absolute> Wert oder einen relativen Gewichts-Wert, wie unten angegeben, spezifiziert.

Werte

normal

Normale Schriftstärke. Entspricht400.

bold

Fette Schriftstärke. Entspricht700.

<number>

Ein<number> Wert zwischen 1 und 1000, beide eingeschlossen. Höhere Zahlen repräsentieren Stärken, die fetter als (oder genauso fett wie) niedrigere Zahlen sind. Dies ermöglicht eine fein abgestufte Kontrolle fürvariable Schriften. Bei nicht-variablen Schriften wird, wenn die exakt spezifizierte Stärke nicht verfügbar ist, einFallback-Gewicht Algorithmus verwendet — numerische Werte, die durch 100 teilbar sind, entsprechen gebräuchlichen Gewichtsbezeichnungen, wie im AbschnittAbbildung gebräuchlicher Gewichtsbezeichnungen unten beschrieben.

lighter

Eine relative Schriftstärke leichter als das Elternelement. Beachten Sie, dass nur vier Schriftstärken zur Berechnung relativer Gewichte herangezogen werden; siehe den AbschnittBedeutung relativer Gewichte unten.

bolder

Eine relative Schriftstärke schwerer als das Elternelement. Beachten Sie, dass nur vier Schriftstärken zur Berechnung relativer Gewichte herangezogen werden; siehe den AbschnittBedeutung relativer Gewichte unten.

Fallback-Gewichte

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

• Wenn das angegebene Zielgewicht zwischen400 und500 inklusiv liegt:

  • Suchen Sie nach verfügbaren Gewichten zwischen dem Ziel und500, in aufsteigender Reihenfolge.
  • Wenn keine Übereinstimmung gefunden wird, suchen Sie nach verfügbaren Gewichten unterhalb des Ziels, in absteigender Reihenfolge.
  • Wenn keine Übereinstimmung gefunden wird, suchen Sie nach verfügbaren Gewichten oberhalb von500, in aufsteigender Reihenfolge.

• Wenn ein Gewicht unter400 angegeben wird, suchen Sie nach verfügbaren Gewichten unterhalb des Ziels, in absteigender Reihenfolge. Wenn keine Übereinstimmung gefunden wird, suchen Sie nach verfügbaren Gewichten oberhalb des Ziels, in aufsteigender Reihenfolge.

• Wenn ein Gewicht über500 angegeben wird, suchen Sie nach verfügbaren Gewichten oberhalb des Ziels, in aufsteigender Reihenfolge. Wenn keine Übereinstimmung gefunden wird, suchen Sie nach verfügbaren Gewichten unterhalb des Ziels, in absteigender Reihenfolge.

Bedeutung relativer Gewichte

Wennlighter oderbolder spezifiziert wird, zeigt das unten stehende Diagramm, wie das absolute Schriftgewicht des Elements bestimmt wird.

Beachten Sie, dass beim Verwenden relativer Gewichte nur vier Schriftstärken berücksichtigt werden — dünn (100), normal (400), fett (700) und schwer (900). Wenn eine Schriftartfamilie mehr verfügbare Gewichte hat, werden diese für die Berechnung relativer Gewichte ignoriert.

Abbildung gebräuchlicher Gewichtsbezeichnungen

Die numerischen Werte100 bis900 entsprechen ungefähr den folgenden gebräuchlichen Gewichtsbezeichnungen (siehe dieOpenType-Spezifikation):

Variable Schriften

Während viele Schriftarten ein bestimmtes Gewicht haben, das einer der Zahlen in derAbbildung gebräuchlicher Gewichtsbezeichnungen entspricht, unterstützen die meisten variablen Schriften einen Gewichtsbereich, der viel feinere Granularität bietet und den Designern und Entwicklern mehr Kontrolle über das gewählte Gewicht ermöglicht.

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

Dieses Demo lädt mitfont-weight: 500; eingestellt. Ändern Sie den Wert derfont-weight Eigenschaft im.sample Selector, um das Gewicht des Textes zu ändern (z. B. 200, 700). Klicken Sie auf "Play" in den untenstehenden Code-Blöcken, um das Beispiel im MDN Playground zu bearbeiten:

<p>  ...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-size: 1.5rem;  font-family: "MutatorSans", sans-serif;}

Barrierefreiheit

Menschen mit Sehbehinderungen können Schwierigkeiten haben, Texte zu lesen, die mit einemfont-weight Wert von100 (Dünn/Hairline) oder200 (Extra Leicht) gesetzt sind, insbesondere wenn die Schriftart einniedriges Kontrastfarbverhältnis hat.

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

Formale Definition

Formale Syntax

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

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

Beispiele

Einstellen von Schriftgewichten

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• font-family
• font-style
• SVGfont-weight Attribut
• Lernen: Grundlegende Text- und Schriftgestaltung
• CSS Schriften Modul