Signatur
Beschreibung
Die Eigenschaft weight des Interfaces FontFace steht für den Deskriptor font-weight einer @font-face-Regel. Sie legt fest, für welches Schriftgewicht der Browser diese Schriftdatei verwenden soll, wenn ein Element mit passender font-family und passendem font-weight dargestellt wird.
Der Wert ist immer ein String. Erlaubt sind die Schlüsselwörter "normal" (entspricht 400) und "bold" (entspricht 700), Zahlen zwischen 1 und 1000 (z. B. "300") sowie bei variablen Schriften ein Bereich wie "100 900". Der Standardwert ist "normal".
Man nutzt die Eigenschaft vor allem, wenn Schriften per JavaScript geladen werden, etwa mehrere Schnitte (Light, Regular, Bold) derselben Familie, die unter einem gemeinsamen family-Namen im document.fonts-Set registriert werden. Den Anfangswert setzt man meistens über das Objekt descriptors im Konstruktor new FontFace(family, source, { weight }). Er lässt sich aber auch später noch ändern.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "normal" | Nur beim Setzen: ein gültiger Wert für font-weight wie "normal", "bold", "600" oder ein Bereich wie "200 800". |
Rückgabewert
FontFace als String, z. B. "normal", "700" oder "100 900".Beispiele
Mehrere Schnitte einer Familie laden
const schnitte = [
{ url: '/fonts/Inter-Light.woff2', weight: '300' },
{ url: '/fonts/Inter-Regular.woff2', weight: '400' },
{ url: '/fonts/Inter-Bold.woff2', weight: '700' }
];
const ladeSchriften = async () => {
const faces = schnitte.map(({ url, weight }) =>
new FontFace('Inter', `url(${url})`, { weight })
);
await Promise.all(faces.map((f) => f.load()));
faces.forEach((f) => document.fonts.add(f));
console.log(faces.map((f) => f.weight));
};
ladeSchriften();Gewicht auslesen und nachträglich ändern
const face = new FontFace('Roboto', 'url(/fonts/Roboto-Bold.woff2)');
console.log(face.weight); // Standardwert
face.weight = 'bold';
console.log(face.weight);
document.fonts.add(face);Variable Schrift mit Gewichtsbereich
const variabel = new FontFace(
'Recursive',
'url(/fonts/Recursive-VF.woff2)',
{ weight: '300 1000' }
);
const face = await variabel.load();
document.fonts.add(face);
document.body.style.fontFamily = 'Recursive';
document.body.style.fontWeight = '650';
console.log(face.weight);Registrierte Schriftgewichte auflisten
await document.fonts.ready;
for (const face of document.fonts) {
console.log(`${face.family}: ${face.weight} (${face.status})`);
}// Wichtig · Fallstricke
- Ein ungültiger Wert (z. B.
"extra-dick"oder"0") löst beim Setzen einenSyntaxError(DOMException) aus. Im Konstruktor führt er dazu, dass die Schrift den Status"error"erhält. - Relative Schlüsselwörter wie
"bolder"und"lighter"sind in@font-facenicht erlaubt. - Der Wert ist immer ein String. Zahlen werden zwar in einen String umgewandelt, für die Lesbarkeit sollte man aber
'700'statt700schreiben. - Der Browser kann den gelesenen Wert normalisieren, zum Beispiel
"400"als"normal"ausgeben. Vergleiche mit===sollten das berücksichtigen. - Die Eigenschaft sagt nur, wofür die Datei gilt. Sie macht eine Schrift nicht dicker. Fehlt ein passender Schnitt, erzeugt der Browser unter Umständen ein künstliches Fett (
font-synthesis). - Die CSS Font Loading API funktioniert in allen modernen Browsern und in Web Workern, aber nicht im Internet Explorer. Gewichtsbereiche für variable Schriften unterstützen erst neuere Browserversionen.