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
/* <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
und500
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.
- Suche nach verfügbaren Gewichten zwischen dem Ziel und
-
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:
<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;
}
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
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
Schriftgewichte einstellen
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
Specification |
---|
CSS Fonts Module Level 4 # font-weight-prop |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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
font-family
font-style
- SVG
font-weight
Attribut - Lernen: Grundlegende Text- und Schriftstile
- CSS Fonts Modul