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 Schriftgewicht oder einen Bereich von Schriftgewichten für die im @font-face
Attribut angegebenen Schriftarten zu spezifizieren. Dies wird dann vom Browser verwendet, um die passende Schriftart auszuwählen, wenn eine CSS-Regel ein gewünschtes Schriftgewicht
setzt.
In der Regel möchte ein Entwickler Schriften aus einer einzigen Schriftfamilie in einer Vielzahl unterschiedlicher Gewichte verwenden. Bei traditionellen oder statischen Schriften enthält eine einzelne Schriftdatei Zeichen aus einer Schriftfamilie in einem bestimmten Gewicht und Stil: zum Beispiel "Helvetica fett kursiv". Um die Anzeige von leichten, regulären, fetten oder extra-fetten Schriften zu ermöglichen, wenn die font-weight
Eigenschaft ein bestimmtes Gewicht anfordert, können Sie mehrere @font-face
At-Regeln für dieselbe Familie (alle mit dem gleichen font-family
Deskriptorwert) definieren, eine für jedes Gewicht oder Gewichtsbereich.
Um die Schriftart für einen Bereich von Schriftgewichten zu deklarieren, deklarieren Sie ein durch Leerzeichen getrenntes Paar von font-weight
Werten als Wert für den font-weight
Deskriptor. Wenn CSS-Regeln ein Schriftgewicht setzen, indem sie die font-weight
Eigenschaft oder die font
Kurzform-Eigenschaft setzen, wird dann die passende Schriftart verwendet.
Zum Beispiel, wenn der Deskriptor font-weight: 400 600;
lautet, wird die Schriftart für diese Schriftfamilie verwendet, wenn die Eigenschaft font-weight: 450
oder font-weight: 550
ist. Ob die Schrift eine statische oder eine variable Schrift ist, die Schriftart, die dem Bereich entspricht, wird verwendet. In diesem Fall, wenn die Schrift eine statische Schrift ist, sehen 450
und 550
gleich aus. Wenn es sich um eine variable Schrift handelt, wird letztere fetter erscheinen.
Der Deskriptor ist für alle Schriften gleich, aber der Bereich, den Sie für eine variable Schrift festlegen werden, wird in der Regel größer sein, möglicherweise sogar 1 1000
, um dieselbe Schrift für alle Schriftgewichtswerte 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>
kann einer der folgenden sein:
normal
-
Normales Schriftgewicht. Gleich wie
400
. bold
-
Fettes Schriftgewicht. Gleich wie
700
. <number>
-
Ein
<number>
Wert zwischen 1 und 1000, inklusive. Höhere Zahlen stehen für Gewichte, die fetter sind als (oder genauso fett wie) niedrigere Zahlen. Bestimmte häufig verwendete Werte entsprechen gängigen Gewichtsnamen, wie in der Mapping von häufigen Gewichtsnamen unten beschrieben.
Mapping von häufigen Gewichtsnamen
Die numerischen Werte von 100
bis 900
entsprechen ungefähr den folgenden gängigen Gewichtsnamen:
Wert | Gängiger Gewichtsnamen |
---|---|
100 | Dünn (Haarlinie) |
200 | Extra Leicht (Ultra Leicht) |
300 | Leicht |
400 | Normal |
500 | Mittel |
600 | Semi Fett (Demi Fett) |
700 | Fett |
800 | Extra Fett (Ultra Fett) |
900 | Schwarz (Schwer) |
Variable Schriften
Die meisten Schriften haben ein bestimmtes Gewicht, das einem der Zahlen in der Mapping von häufigen Gewichtsnamen entspricht. Einige Schriften, die als variable Schriften bezeichnet werden, können jedoch einen Bereich von Gewichten mit mehr oder weniger feiner Granularität unterstützen und bieten dem Designer so eine viel genauere Kontrolle über das gewählte Gewicht.
Für TrueType oder OpenType variable Schriften wird die "wght" Variation verwendet, um unterschiedliche Gewichte zu implementieren.
Barrierefreiheit
Personen mit Sehbehinderungen könnten Schwierigkeiten beim Lesen von Text haben, der mit einem font-weight
Wert von 100
(Dünn/Haarlinie) oder 200
(Extra Leicht) gesetzt ist, insbesondere wenn die Schrift ein geringes Kontrastverhältnis aufweist.
Formale Definition
Zugehörige @-Regel | @font-face |
---|---|
Initialer Wert | 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 normaler und fetter Schriften
In diesem Beispiel verwenden wir zwei Schriften, eine mit normalem Gewicht, eine mit fettem Gewicht, aus der "Fira Sans" Schriftfamilie, indem wir zwei @font-face
At-Regeln verwenden. Wir setzen font-weight
Deskriptoren, um das Gewicht der Schriften abzugleichen.
Danach können CSS-Regeln die normale oder die fette Schrift für die "Fira Sans" Familie auswählen, indem sie die font-weight
Eigenschaft setzen. Beachten Sie, dass das <strong>
HTML-Element ebenfalls die fette Schrift auswählt, weil <strong>
Elemente standardmäßig einen CSS font-weight
Eigenschaftswert von 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
Festlegen von Schriftgewichtsbereichen
Dieses Beispiel demonstriert, wie Autoren mehrere Schriften für mehrere Schriftgewichte (und -stile) einbinden können, indem sie mehrere @font-face
Deklarationen mit demselben font-family
Wert einfügen. Indem Sie die font-weight
Deskriptoren von 1 bis 1000 festlegen, können Sie im Rest Ihrer Stylesheets ein font-weight
(oder font-style
) deklarieren und wissen, 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 fügen vier @font-face
Deklarationen für vier verschiedene Schriften aus der FireSans
Schriftfamilie ein, wie im vorherigen Beispiel gezeigt. Jede Deklaration wird auf einen anderen Bereich von Schriftgewichtswerten gesetzt, aber alle verwenden denselben Schriftnamen.
Die erste Deklaration verwendet FiraSans-Regular
und deren zugehöriger font-weight
Bereich umfasst den gesamten möglichen Bereich der Schriftgewichtswerte.
Die anderen drei Deklarationen verwenden die leichte, fett und extra-fett Version 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
Das CSS Kaskadierung stellt sicher, dass die drei letzteren Deklarationen Teile des Bereichs überschreiben, die in der FiraSans-Regular
Deklaration festgelegt wurden.
@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 die FiraSans-Bold
als auch die FiraSans-ExtraBold
Deklarationen abgleicht, überschreibt, da die FiraSans-ExtraBold
später deklariert ist, diese die FiraSans-Bold
für diesen Wert.
Ebenso verwenden sowohl der 100
als auch der 300
Absatz die leichte Schrift; obwohl FiraSans-Regular
und FiraSans-Light
beide 300
in ihren Bereichen enthalten, wird FiraSans-Light
später deklariert. Alternativ hätten wir FiraSans-Regular
nach FiraSans-Light
deklarieren können, müssten jedoch den font-weight
Deskriptorbereich ändern, wenn wir dies tun.
Einstellen eines Bereichs für eine variable Schrift
In diesem Beispiel verwenden wir den font-weight
Deskriptor, um den Bereich der Gewichte einzuschränken, die bei der Verwendung einer variablen Schrift festgelegt werden können.
Wir fügen eine variable Schrift ein, "League Mono", durch die Verwendung einer einzelnen @font-face
At-Regel. Wir verwenden einen font-weight: 300 700
Wert, um den Bereich der verfügbaren Gewichte effektiv zu begrenzen. Wenn eine CSS-Regel unsere "League Mono" Schrift verwendet, wird das Gewicht, wenn es außerhalb dieses Bereichs liegt, auf den Bereich geklemmt.
HTML
Wir fügen einen Absatz mit <output>
ein, der initial auf 400
gesetzt ist, da dies das Standard-Schriftgewicht für ungestylten Absatztext ist. Dieser Absatz ist zwischen zwei anderen Absätzen eingefügt, sodass Sie gerenderte gegenüber deklarierte Schriftgewichtswerte vergleichen können.
Wir fügen ein <input/range>
vom Typ range
hinzu, eingekapselt in ein <label>
, wobei der step
auf 50
gesetzt wird.
<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 size:
<input type="range" min="50" max="1000" step="50" value="400" />
</label>
CSS
Wir setzen den font-weight
Deskriptorbereich auf 300 700
, um die variable Schrift auf diesen Bereich zu klemmen.
@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 spiegelt, um die Veränderung zu reflektieren:
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 300
Absatz darüber oder fetter als der 700
Absatz darunter wird; das Schriftgewicht ist auf den durch den font-weight
Deskriptor definierten Bereich geklemmt.
Spezifikationen
Specification |
---|
CSS Fonts Module Level 4 # font-prop-desc |
Browser-Kompatibilität
BCD tables only load in the browser