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 setzt das Gewicht (oder die Fettstärke) der Schriftart. Die verfügbaren Gewichte hängen von der aktuell gesetzten font-family ab.

Probieren Sie es aus

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 mit einem <font-weight-absolute> Wert oder einem relativen Gewichts-Wert 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 repräsentieren schwerere Gewichte als (oder genauso schwer wie) niedrigere Zahlen. Dies ermöglicht eine feingliedrige Kontrolle für variable Fonts. Für nicht-variable Fonts wird, wenn das exakt angegebene Gewicht nicht verfügbar ist, ein Ersatzgewicht Algorithmus verwendet — numerische Werte, die durch 100 teilbar sind, entsprechen gebräuchlichen Gewichtsnamen, wie unten in der Sektion Übliche Gewichtsnamen-Abbildung beschrieben.

lighter

Ein relatives Schriftgewicht, das leichter als das des Elternelements ist. Beachten Sie, dass für relative Gewichtbestimmung nur vier Schriftgewichte berücksichtigt werden; siehe die Sektion Bedeutung relativer Gewichtungen unten.

bolder

Ein relatives Schriftgewicht, das schwerer als das des Elternelements ist. Beachten Sie, dass für relative Gewichtbestimmung nur vier Schriftgewichte berücksichtigt werden; siehe die Sektion Bedeutung relativer Gewichtungen unten.

Ersatzgewichte

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

  • Wenn das angegebene Zielgewicht zwischen 400 und 500 einschließlich liegt:

    • Suche nach verfügbaren Gewichten zwischen dem Ziel und 500, in aufsteigender Reihenfolge.
    • Wenn keine Übereinstimmung gefunden wird, suche nach verfügbaren Gewichten kleiner als das Ziel, in absteigender Reihenfolge.
    • Wenn keine Übereinstimmung gefunden wird, suche nach verfügbaren Gewichten größer als 500, in aufsteigender Reihenfolge.
  • Wenn ein Gewicht kleiner als 400 angegeben ist, suche nach verfügbaren Gewichten kleiner als das Ziel, in absteigender Reihenfolge. Wenn keine Übereinstimmung gefunden wird, suche nach verfügbaren Gewichten größer als das Ziel, in aufsteigender Reihenfolge.

  • Wenn ein Gewicht größer als 500 angegeben ist, suche nach verfügbaren Gewichten größer als das Ziel, in aufsteigender Reihenfolge. Wenn keine Übereinstimmung gefunden wird, suche nach verfügbaren Gewichten kleiner als das Ziel, in absteigender Reihenfolge.

Hinweis: Der Ersatzgewicht-Algorithmus wird nur für das Rendering verwendet. Der berechnete Wert der Eigenschaft ist immer noch der angegebene Wert.

Bedeutung relativer Gewichtungen

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

Beachten Sie, dass bei der Verwendung relativer Gewichte nur vier Schriftgewichte berücksichtigt werden — thin (100), normal (400), bold (700), und heavy (900). Wenn eine Schriftfamilie mehr Gewichte verfügbar hat, werden diese für die Berechnung relativer Gewichtungen 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

Übliche Gewichtsnamen-Abbildung

Die numerischen Werte von 100 bis 900 entsprechen ungefähr den folgenden gebräuchlichen Gewichtsnamen (siehe die OpenType Spezifikation):

Wert Üblicher Gewichtname
100 Dünn (Haarlinie)
200 Extra Leicht (Ultra Leicht)
300 Leicht
400 Normal (Regulär)
500 Mittel
600 Halb Fett (Demi Fett)
700 Fett
800 Extra Fett (Ultra Fett)
900 Schwarz (Schwer)
950 Extra Schwarz (Ultra Schwarz)

Variable Fonts

Während viele Schriftarten ein bestimmtes Gewicht haben, das einem der Zahlen in der Üblichen Gewichtsnamen-Abbildung entspricht, unterstützen die meisten variablen Fonts eine Reihe von Gewichten, die eine viel feinere Granularität bieten und es Designern und Entwicklern ermöglichen, das ausgewählte Gewicht genauer zu kontrollieren.

Für TrueType- oder OpenType-Variable-Schriftarten 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 untenstehenden Code-Blö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:
    1.5rem "MutatorSans",
    sans-serif;
}

Barrierefreiheit

Personen mit eingeschränktem Sehvermögen können Schwierigkeiten haben, Text zu lesen, der mit einem font-weight Wert von 100 (Dünn/Haarlinie) oder 200 (Extra Leicht) gesetzt ist, insbesondere wenn die Schriftart ein niedriges Kontrastverhältnis hat.

Formale Definition

Anfangswertnormal
Anwendbar aufall elements and text. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Berechneter Wertdas Schlüsselwort oder der numerische Wert wie angegeben, wobei bolder und lighter in einen realen Wert umgewandelt werden
AnimationstypSchriftgewichtung

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

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

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-weight
bold
bolder
lighter
normal
<number> syntax

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch