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.
Der font-weight
CSS-@font-face
-Deskriptor ermöglicht es Autoren, ein einzelnes oder einen Bereich von Schriftgewicht(en) für die im @font-face
-At-Regel spezifizierte Schriftart anzugeben. Der Browser verwendet dies dann, um die passende Schrift auszuwählen, wenn eine CSS-Regel ein gewünschtes Schriftgewicht
setzt.
Typischerweise möchte ein Entwickler Schriftarten aus einer einzigen Schriftfamilie in verschiedenen Gewichten verwenden. Bei traditionellen oder statischen Schriftarten enthält eine einzelne Schriftdatei Zeichen einer Schriftfamilie in einem spezifischen Gewicht und Stil, beispielsweise „Helvetica fett kursiv“. Um die Anzeige von leichten, regulären, fetten oder extrafetten Schriftarten zu ermöglichen, wenn die font-weight
-Eigenschaft ein spezifisches Gewicht aufruft, können Sie mehrere @font-face
-At-Regeln für dieselbe Familie definieren (alle mit demselben Wert für den font-family
-Deskriptor), eine für jedes Gewicht oder jede Gewichtsspanne.
Um die Schriftart für einen Bereich von Schriftgewichten zu deklarieren, geben Sie ein durch ein Leerzeichen getrenntes Paar von Schriftgewicht-Werten als Wert für den font-weight
-Deskriptor an. Wenn CSS-Regeln ein Schriftgewicht durch Festlegen der font-weight
-Eigenschaft oder der font
-Kurzschreibweise definieren, wird dann die entsprechende Schriftart verwendet.
Zum Beispiel, wenn der Deskriptor font-weight: 400 600;
lautet, wird bei Verwendung von font-weight: 450
oder font-weight: 550
diese Schriftart für die Schriftfamilie genutzt. Ob die Schrift statisch oder eine variable Schrift ist, die passende Schrift im Bereich wird verwendet. In diesem Fall sehen 450
und 550
gleich aus, wenn die Schriftart statisch ist. Ist es eine variable Schrift, wird letztere fetter dargestellt.
Der Deskriptor ist für alle Schriftarten gleich, aber der Bereich, den Sie für eine variable Schrift setzen, ist in der Regel größer, möglicherweise sogar 1 1000
, um dieselbe Schriftart für alle Werte der Schriftgewicht-Eigenschaft zu verwenden.
Syntax
/* Single values */
font-weight: normal;
font-weight: bold;
font-weight: 400;
/* Defining a range */
font-weight: normal bold;
font-weight: 300 500;
Werte
Der font-weight
-Deskriptor nimmt eine der folgenden Formen an:
- Das Schlüsselwort
auto
. - Ein einzelner
<font-weight-absolute>
-Wert. - Ein Paar von
<font-weight-absolute>
-Werten, getrennt durch ein Leerzeichen.
Jeder <font-weight-absolute>
-Wert kann einer der folgenden sein:
normal
-
Normales Schriftgewicht. Entspricht
400
. bold
-
Fettes Schriftgewicht. Entspricht
700
. <number>
-
Ein
<number>
-Wert zwischen 1 und 1000 (einschließlich). Höhere Zahlen entsprechen Gewichten, die fetter als (oder genauso fett wie) niedrigere Zahlen sind. Einige häufig verwendete Werte korrespondieren mit gängigen Gewichtsnamen, wie im Abschnitt Gemeinsame Gewichtsnamen-Zuordnung unten beschrieben.
Gemeinsame Gewichtsnamen-Zuordnung
Die numerischen Werte 100
bis 900
entsprechen ungefähr den folgenden gemeinsamen Gewichtsnamen:
Wert | Gemeinsamer Gewichtname |
---|---|
100 | Dünn (Haarlinie) |
200 | Extra Leicht (Ultra Leicht) |
300 | Leicht |
400 | Normal |
500 | Mittel |
600 | Halbfett (Demi Fett) |
700 | Fett |
800 | Extra Fett (Ultra Fett) |
900 | Schwarz (Schwer) |
Variable Schriftarten
Die meisten Schriftarten haben ein bestimmtes Gewicht, das einer der Zahlenwerte in der Gemeinsamen Gewichtsnamen-Zuordnung entspricht. Einige Schriftarten, sogenannte variable Schriftarten, können jedoch eine Reihe von Gewichten mit mehr oder weniger feiner Granularität unterstützen, was Designern eine viel größere Kontrolle über das gewählte Gewicht ermöglicht.
Bei TrueType- oder OpenType-variablen Schriftarten wird die "wght"-Variation verwendet, um unterschiedliche Gewichte umzusetzen.
Barrierefreiheit
Menschen mit Sehbehinderungen 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 aufweist.
Formale Definition
Zugehörige @-Regel | @font-face |
---|---|
Anfangswert | normal |
Berechneter Wert | wie angegeben |
Formale Syntax
font-weight =
auto |
<font-weight-absolute>{1,2}
<font-weight-absolute> =
normal |
bold |
<number [1,1000]>
Beispiele
Auswahl von normalen und fetten Schriftarten
In diesem Beispiel integrieren wir zwei Schriftarten aus der Schriftfamilie "Fira Sans", eine mit normalem Gewicht und eine mit fettem Gewicht, unter Verwendung von zwei @font-face
-At-Regeln. Wir setzen font-weight
-Deskriptoren, um das Gewicht der Schriftarten abzugleichen.
Danach können CSS-Regeln durch Festlegen der font-weight
-Eigenschaft zwischen der normalen und der fetten Schriftart für die "Fira Sans"-Familie wählen. Beachten Sie, dass auch das <strong>
-HTML-Element die fette Schrift auswählt, da <strong>
-Elemente standardmäßig eine CSS-font-weight
-Eigenschaft mit dem Wert bold
haben.
HTML
<p class="one">Fira Sans, `normal` weight paragraph</p>
<p class="two">Fira Sans, `bold` weight paragraph</p>
<p><strong>Fira Sans, <strong> element (`bold`)</strong></p>
CSS
@font-face {
font-family: "Fira Sans";
font-weight: normal;
src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Regular.woff2");
}
@font-face {
font-family: "Fira Sans";
font-weight: bold;
src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Bold.woff2");
}
body {
font-family: "Fira Sans", serif;
font-size: 2rem;
}
p.one {
font-weight: normal;
}
p.two {
font-weight: bold;
}
Ergebnis
Einstellen von Schriftgewichtsspannen
Dieses Beispiel zeigt, wie Autoren mehrere Schriftarten für verschiedene Schriftgewichte (und Schriftstile) einbinden können, indem sie mehrere @font-face
-Deklarationen mit demselben font-family
-Wert verwenden. Durch Festlegen der font-weight
-Deskriptoren mit Spannen von 1 bis 1000 können Sie in Ihren Stylesheets ein Schriftgewicht (oder Schriftstil) deklarieren und sicherstellen, dass die passende Schrift verwendet wird.
HTML
<p class="one">This has a font weight of 100</p>
<p class="three">This has a font weight of 300</p>
<p class="four">This has a font weight of 400</p>
<p class="five">This has a font weight of 500</p>
<p class="seven">This has a font weight of 700</p>
<p class="nine">This has a font weight of 900</p>
CSS
Wir schließen vier @font-face
-Deklarationen für vier verschiedene Schriftarten der Schriftfamilie FireSans
ein, wie im vorherigen Beispiel zu sehen. Jede Deklaration wird auf einen anderen Bereich von Schriftgewichtswerten gesetzt, aber alle verwenden denselben Schriftfamiliennamen.
Die erste Deklaration verwendet FiraSans-Regular
und ihr zugehöriger font-weight
-Bereich umfasst die gesamte mögliche Bandbreite von Schriftgewichtswerten.
Die anderen drei Deklarationen verwenden die leichten, fetten und extra fetten Versionen der Schrift, und deren zugehörige font-weight
-Bereiche definieren Teilbereiche des Bereichs wie folgt:
- die leichte Schrift ist dem Bereich 1-300 zugeordnet,
- die fette Schrift ist dem Bereich 500-700 zugeordnet,
- die extra fette Schrift ist dem Bereich 700-1000 zugeordnet.
Die CSS-Kaskade stellt sicher, dass die drei letztgenannten Deklarationen Teile des Bereichs überschreiben, der in der FiraSans-Regular
-Deklaration festgelegt wurde.
@font-face {
font-family: "Fira Sans";
font-weight: 1 1000;
src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Regular.woff2");
}
@font-face {
font-family: "Fira Sans";
font-weight: 1 300;
src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Light.woff2");
}
@font-face {
font-family: "Fira Sans";
font-weight: 500 700;
src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Bold.woff2");
}
@font-face {
font-family: "Fira Sans";
font-weight: 700 1000;
src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-ExtraBold.woff2");
}
body {
font-family: "Fira Sans", serif;
font-size: 2rem;
}
p.one {
font-weight: 100;
}
p.three {
font-weight: 300;
}
p.four {
font-weight: 400;
}
p.five {
font-weight: 500;
}
p.seven {
font-weight: 700;
}
p.nine {
font-weight: 900;
}
Ergebnis
Der seven
-Absatz verwendet die extra fette Schrift. Während font-weight: 700
sowohl zu den Deklarationen FiraSans-Bold
als auch FiraSans-ExtraBold
passt, überschreibt die später deklarierte FiraSans-ExtraBold
-Schriftart die FiraSans-Bold
für diesen Wert.
Ähnlich verwenden 100
und 300
beide die leichte Schrift; obwohl FiraSans-Regular
und FiraSans-Light
beide 300
in ihren Bereichen enthalten, wurde FiraSans-Light
später deklariert. Alternativ hätten wir FiraSans-Regular
nach FiraSans-Light
deklarieren können, müssten aber den Bereich des font-weight
-Deskriptors ändern, wenn wir dies tun.
Festlegen eines Bereichs für eine variable Schrift
In diesem Beispiel wird der font-weight
-Deskriptor verwendet, um den Bereich der Gewichte einzuschränken, die bei der Verwendung einer variablen Schrift eingestellt werden können.
Wir binden eine variable Schrift, "League Mono", mit einer einzigen @font-face
-At-Regel ein. Wir verwenden den Wert font-weight: 300 700
, um den Bereich der verfügbaren Schriftgewichte effektiv einzuschränken. Wenn eine CSS-Regel unsere "League Mono"-Schrift verwendet, wird ein Gewicht außerhalb dieses Bereichs auf den definierten Bereich geklemmt.
HTML
Wir fügen einen Absatz mit <output>
ein, der zunächst auf 400
gesetzt ist, da dies das Standard-Schriftgewicht für ungestalteten Absatztext ist. Dieser Absatz ist zwischen zwei anderen Absätzen verschachtelt, sodass Sie die gerenderten gegenüber den deklarierten Schriftgewichtswerten vergleichen können.
Wir binden einen <input/range>
vom Typ range
ein, verschachtelt in ein <label>
, das den step
auf 50
setzt.
<p>LeagueMono, font-weight: 300 (comparison)</p>
<p id="example">LeagueMono, font-weight: <output>400</output> (example)</p>
<p>LeagueMono, font-weight: 700 (comparison)</p>
<label
>Change the font weight:
<input type="range" min="50" max="1000" step="50" value="400" />
</label>
CSS
Wir setzen den Bereich des font-weight
-Deskriptors auf 300 700
, um die variable Schriftart auf diesen Bereich zu begrenzen.
@font-face {
font-family: LeagueMono;
src: url("https://mdn.github.io/shared-assets/fonts/LeagueMono-VF.ttf");
font-weight: 300 700;
}
p {
font-family: LeagueMono, serif;
font-size: 1.5rem;
}
p:first-of-type {
font-weight: 300;
}
p:last-of-type {
font-weight: 700;
}
JavaScript
Wir fügen einen Ereignishandler hinzu, der den font-weight
-Eigenschaftswert des Absatzes aktualisiert und den Text entsprechend ändert:
const text = document.querySelector("#example");
const log = document.querySelector("output");
const range = document.querySelector("input");
range.addEventListener("change", () => {
text.style.fontWeight = range.value;
log.innerText = range.value;
});
Ergebnis
Ändern Sie das Schriftgewicht des Absatzes über den Bereich. Beachten Sie, dass der Beispielabsatz nicht leichter als der obere Absatz mit 300
oder fetter als der untere mit 700
wird; das Schriftgewicht wird auf den Bereich begrenzt, der im font-weight
-Deskriptor festgelegt wurde.
Spezifikationen
Specification |
---|
CSS Fonts Module Level 4 # font-prop-desc |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
font-weight |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support