FontFace.ascentOverride — Eigenschaft · JavaScript-Referenz

Signatur

FontFace.ascentOverride

Beschreibung

Die Eigenschaft ascentOverride des FontFace-Interfaces ist das JavaScript-Gegenstück zum CSS-Deskriptor ascent-override in @font-face. Sie legt die Ascent-Metrik fest, also den Abstand von der Grundlinie bis zur Oberkante des Zeilenkastens. Angegeben wird sie als Prozentwert der verwendeten Schriftgröße. Damit ersetzt sie den Wert, der in der Schriftdatei selbst hinterlegt ist.

Der Wert ist immer eine Zeichenkette: Entweder "normal" (Standard, dann gilt die Metrik aus der Schriftdatei) oder ein nicht-negativer Prozentwert wie "90%". Du kannst ihn beim Erzeugen über das Deskriptor-Objekt von new FontFace() übergeben oder später direkt an der Eigenschaft ändern.

Am häufigsten braucht man das, um Layout-Verschiebungen (CLS) zu vermeiden. Man baut eine Ersatzschrift aus einer lokalen Systemschrift (z. B. Arial) und passt deren Metriken mit ascentOverride, descentOverride, lineGapOverride und sizeAdjust an die Web-Schrift an. Wenn die Web-Schrift dann nachlädt, springt der Text nicht mehr. Ein zweiter Anwendungsfall: Schriften, deren Zeilenhöhe von Plattform zu Plattform unterschiedlich ausfällt, lassen sich so einheitlich darstellen.

Parameter

Name	Typ	Default	Beschreibung
$value	string	"normal"	Beim Setzen: `"normal"` oder ein nicht-negativer Prozentwert wie `"95%"`. Ungültige Werte lösen einen `SyntaxError` aus.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Ascent-Wert, z. B. "normal" oder "90%".

Beispiele

Ascent beim Erzeugen festlegen und auslesen

const font = new FontFace(
  'Inter',
  'url(/fonts/inter.woff2) format("woff2")',
  { ascentOverride: '90%', descentOverride: '22%' }
);

console.log(font.ascentOverride);
console.log(new FontFace('Test', 'url(/t.woff2)').ascentOverride);

90% normal

Metrisch angepasste Ersatzschrift gegen Layout-Verschiebungen

// Lokale Arial so anpassen, dass sie die Maße von "Roboto" nachbildet
const fallback = new FontFace('Roboto Fallback', 'local("Arial")', {
  ascentOverride: '92.77%',
  descentOverride: '24.41%',
  lineGapOverride: '0%',
  sizeAdjust: '100.3%'
});

const loaded = await fallback.load();
document.fonts.add(loaded);

// Im CSS: font-family: 'Roboto', 'Roboto Fallback', sans-serif;
console.log(`Fallback aktiv, Ascent: ${loaded.ascentOverride}`);

Fallback aktiv, Ascent: 92.77%

Wert zur Laufzeit ändern und Fehler abfangen

const font = new FontFace('Demo', 'local("Georgia")');
document.fonts.add(font);

font.ascentOverride = '110%';
console.log(font.ascentOverride);

try {
  font.ascentOverride = '-10%'; // negativ ist nicht erlaubt
} catch (err) {
  console.log(err.name);
}

font.ascentOverride = 'normal'; // zurück zur Metrik aus der Datei

110% SyntaxError

// Wichtig · Fallstricke

Browser-Unterstützung: Chromium-Browser ab Version 87 und Firefox ab 89 unterstützen die Eigenschaft. Safari unterstützt sie bislang nicht. Dort ist sie undefined, und ein im Konstruktor übergebener Deskriptor wird stillschweigend ignoriert. Prüfe die Unterstützung vorab mit 'ascentOverride' in FontFace.prototype.
Erlaubt sind nur "normal" und Prozentwerte. Absolute Einheiten wie "12px" oder negative Werte lösen beim Setzen einen SyntaxError (DOMException) aus. Im Konstruktor führt ein ungültiger Wert dazu, dass die Schrift den Status "error" bekommt.
Der Prozentwert bezieht sich auf die verwendete Schriftgröße, nicht auf die Einheitsgröße der Schriftdatei (unitsPerEm). Wenn du Werte aus Schrift-Metriken berechnest, rechne so um: ascender / unitsPerEm * 100.
Die Eigenschaft ändert nur die Metriken für das Layout (Zeilenhöhe und vertikale Ausrichtung bei line-height: normal). Die Glyphen werden dadurch nicht skaliert. Um die Glyphengröße anzupassen, verwende sizeAdjust.

Siehe auch

FontFace.descentOverride FontFace.lineGapOverride FontFace.unicodeRange FontFace.stretch FontFace.style