`font-weight` CSS property

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die font-weight CSS Eigenschaft legt die Stärke (oder Fette) der Schriftart fest. Die verfügbaren Gewichte hängen von der aktuell 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;

Werte

Diese Eigenschaft wird als ein einzelner Wert aus der folgenden Liste angegeben:

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 Gewichte, die fetter sind als (oder ebenso fett wie) niedrigere Zahlen. Dies ermöglicht eine fein abgestufte Kontrolle bei variablen Schriften. Bei nicht-variablen Schriften wird ein Ersatzgewicht Algorithmus verwendet, wenn das exakt angegebene Gewicht nicht verfügbar ist — numerische Werte, die durch 100 teilbar sind, entsprechen gängigen Gewichtsnamen, wie im Abschnitt Übersicht der gängigen Gewichtsnamen unten beschrieben.
lighter: Ein relatives Schriftgewicht leichter als das des Elternelements. Bitte beachten Sie, dass für die Berechnung relativer Gewichte nur vier Schriftgewichte berücksichtigt werden; siehe den Abschnitt Bedeutung von relativen Gewichten unten.
bolder: Ein relatives Schriftgewicht schwerer als das des Elternelements. Bitte beachten Sie, dass für die Berechnung relativer Gewichte nur vier Schriftgewichte berücksichtigt werden; siehe den Abschnitt Bedeutung von relativen Gewichten unten.

Ersatzgewichte

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

Wenn das angegebene Zielgewicht zwischen 400 und 500 inklusive 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 unter dem Ziel, in absteigender Reihenfolge.
- Wenn keine Übereinstimmung gefunden wird, suchen Sie nach verfügbaren Gewichten über 500, in aufsteigender Reihenfolge.
Wenn ein Gewicht kleiner als 400 angegeben wird, suchen Sie nach verfügbaren Gewichten unter dem Ziel, in absteigender Reihenfolge. Wenn keine Übereinstimmung gefunden wird, suchen Sie nach verfügbaren Gewichten über dem Ziel, in aufsteigender Reihenfolge.
Wenn ein Gewicht größer als 500 angegeben wird, suchen Sie nach verfügbaren Gewichten über dem Ziel, in aufsteigender Reihenfolge. Wenn keine Übereinstimmung gefunden wird, suchen Sie nach verfügbaren Gewichten unter dem Ziel, in absteigender Reihenfolge.

Hinweis: Der Ersatzgewicht-Algorithmus wird nur für die Darstellung verwendet. Der berechnete Wert der Eigenschaft bleibt der angegebene Wert.

Bedeutung von relativen Gewichten

Wenn lighter oder bolder angegeben ist, zeigt die untenstehende Tabelle, wie das absolute Schriftgewicht des Elements bestimmt wird.

Bitte beachten Sie, dass bei der Verwendung relativer Gewichte nur vier Schriftgewichte berücksichtigt werden — dünn (100), normal (400), fett (700) und schwer (900). Wenn eine Schriftfamilie mehr verfügbare Gewichte 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

Übersicht der gängigen Gewichtsnamen

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

Wert	Gängiger Gewicht Name
100	Dünn (Hairline)
200	Extra Leicht (Ultra Leicht)
300	Leicht
400	Normal (Regulär)
500	Mittel
600	Halbfett (Demi Fett)
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 einer der Zahlen in Übersicht der gängigen Gewichtsnamen entspricht, unterstützen die meisten variablen Schriften eine Bandbreite an Gewichten, die eine viel feinere Granularität bieten und Designern und Entwicklern mehr Kontrolle über das gewählte Gewicht geben.

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

Dieses Demo lädt mit font-weight: 500; festgelegt. Ä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 "Abspielen" 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önnen Schwierigkeiten haben, Text zu lesen, der mit einem font-weight-Wert von 100 (Dünn/Hairline) oder 200 (Extra Leicht) eingestellt ist, insbesondere wenn die Schriftart ein geringes Kontrastverhältnis aufweist.

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

Schriftgewichte einstellen

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

Spezifikation
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-Schriftarten Modul

Help improve MDN

Erfahren Sie, wie Sie beitragen können 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

font-weight CSS property

HTML

CSS

Ergebnis

Help improve MDN

`font-weight` CSS property

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