Signatur
Beschreibung
Die Eigenschaft descentOverride eines FontFace-Objekts entspricht dem CSS-Deskriptor descent-override in einer @font-face-Regel. Sie legt fest, wie groß die Unterlänge (der Bereich unter der Grundlinie) für das Zeilenlayout sein soll. Der Wert ist ein String, entweder "normal" (die Metrik aus der Schriftdatei wird verwendet) oder ein Prozentwert wie "20%". Der Prozentwert bezieht sich auf die verwendete Schriftgröße.
Gebraucht wird die Eigenschaft vor allem, um Layoutverschiebungen (CLS) beim Laden von Webfonts zu verringern. Man passt damit die Metriken einer Ersatzschrift (z. B. einer lokalen Arial) an die eigentliche Webfont an. So bleibt die Zeilenhöhe gleich, wenn die Webfont nachgeladen wird und die Ersatzschrift ablöst. Meist setzt man descentOverride zusammen mit ascentOverride, lineGapOverride und size-adjust.
Man kann den Wert im Konstruktor über das Deskriptor-Objekt übergeben (new FontFace(name, source, { descentOverride: "20%" })) oder später direkt an der Eigenschaft ändern. Ein ungültiger Wert löst beim Setzen einen SyntaxError aus.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "normal" | Nur beim Setzen: "normal" oder ein nicht negativer Prozentwert wie "25%". |
Rückgabewert
"normal" oder "22%".Beispiele
Deskriptor im Konstruktor setzen und auslesen
const font = new FontFace(
'Inter',
'url(/fonts/inter.woff2) format("woff2")',
{ descentOverride: '24%' }
);
console.log(font.descentOverride);Metrisch angepasste Ersatzschrift gegen Layoutverschiebung
// Lokale Arial so anpassen, dass sie die Maße von "Inter" nachbildet
const fallback = new FontFace('Inter Fallback', 'local("Arial")', {
ascentOverride: '90%',
descentOverride: '22.43%',
lineGapOverride: '0%',
sizeAdjust: '107%'
});
await fallback.load();
document.fonts.add(fallback);
document.body.style.fontFamily = '"Inter", "Inter Fallback", sans-serif';
console.log(fallback.descentOverride);Wert nachträglich ändern und Fehler abfangen
const font = new FontFace('Demo', 'local("Georgia")');
console.log(font.descentOverride); // Standardwert
font.descentOverride = '30%';
console.log(font.descentOverride);
try {
font.descentOverride = 'riesig';
} catch (err) {
console.log(err.name);
}// Wichtig · Fallstricke
- Browserunterstützung: Chromium-Browser ab Version 87 und Firefox ab 89 unterstützen die Eigenschaft. Safari unterstützt weder
descentOverridenoch den CSS-Deskriptordescent-override. Dort wird der Wert ignoriert. Vor der Nutzung prüfen, z. B. mit'descentOverride' in FontFace.prototype. - Der Prozentwert bezieht sich auf die verwendete Schriftgröße und nicht auf die Em-Box aus der Schriftdatei. Negative Werte sind ungültig.
- Die Eigenschaft wirkt sich nur auf das Zeilenlayout aus. Die Glyphen selbst werden weder verschoben noch skaliert. Um die Größe anzupassen, nimmt man
sizeAdjust. - Passende Override-Werte lassen sich mit Werkzeugen wie „Fontaine“ oder dem Next.js-Font-Optimizer aus den Metriken der Schriftdatei berechnen. Ausprobierte Schätzwerte führen oft zu sichtbaren Sprüngen.