FontFace.lineGapOverride — Eigenschaft · JavaScript-Referenz

Signatur

FontFace.lineGapOverride

Beschreibung

Die Eigenschaft lineGapOverride des FontFace-Interfaces entspricht dem CSS-Descriptor line-gap-override in einer @font-face-Regel. Sie ist ein String und enthält entweder "normal" oder einen Prozentwert wie "0%" oder "10%". Bei "normal" wird der Line Gap aus den Metrikdaten der Schriftdatei verwendet. Ein Prozentwert ersetzt ihn durch einen festen Anteil der verwendeten Schriftgröße.

Der Line Gap ist der zusätzliche Abstand, den eine Schrift zwischen Zeilen empfiehlt. Bei line-height: normal fließt er in die Höhe der Zeilenbox ein. Jede Schrift bringt dafür eigene Werte mit. Deshalb springt das Layout, wenn eine Ersatzschrift (etwa Arial) gegen die geladene Webfont getauscht wird.

Typischerweise verwendet man lineGapOverride zusammen mit ascentOverride, descentOverride und sizeAdjust. Damit gleicht man die Metriken einer lokalen Ersatzschrift an die Webfont an und verringert Layout-Verschiebungen (CLS) beim Nachladen der Schrift. Den Wert kann man schon im Konstruktor im Descriptor-Objekt übergeben ({ lineGapOverride: "0%" }) oder später über die Eigenschaft ändern.

Parameter

Name	Typ	Default	Beschreibung
$wert	string	"normal"	Nur beim Setzen: `"normal"` oder ein nicht-negativer Prozentwert als String, z. B. `"0%"`. Ungültige Werte lösen einen `SyntaxError` (`DOMException`) aus.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Descriptors, z. B. "normal" oder "0%".

Beispiele

Wert im Konstruktor setzen und auslesen

const font = new FontFace(
  'Inter',
  'url(/fonts/inter.woff2)',
  { lineGapOverride: '0%' }
);

console.log(font.lineGapOverride);

0%

Metrik-angepasste Ersatzschrift gegen Layout-Verschiebungen

// Lokale Arial so anpassen, dass sie die Metriken der Webfont nachbildet
const fallback = new FontFace('Inter Fallback', 'local("Arial")', {
  ascentOverride: '90%',
  descentOverride: '22%',
  sizeAdjust: '107%'
});

fallback.lineGapOverride = '0%';

await fallback.load();
document.fonts.add(fallback);

// CSS: font-family: 'Inter', 'Inter Fallback', sans-serif;
console.log(fallback.lineGapOverride, fallback.status);

0% loaded

Ungültige Werte abfangen und auf Unterstützung prüfen

const font = new FontFace('Demo', 'local("Georgia")');

if (!('lineGapOverride' in FontFace.prototype)) {
  console.log('line-gap-override wird nicht unterstützt');
} else {
  try {
    font.lineGapOverride = '12px'; // Längenangaben sind nicht erlaubt
  } catch (err) {
    console.log(err.name);
  }
  console.log(font.lineGapOverride);
}

SyntaxError normal

// Wichtig · Fallstricke

Browser-Unterstützung: Chromium-Browser ab Version 87 und Firefox ab Version 89 unterstützen die Eigenschaft. Safari unterstützt sie bislang nicht. Dort wird sie ignoriert, und die Schrift verwendet ihre eigenen Metriken. Vorher mit 'lineGapOverride' in FontFace.prototype prüfen.
Erlaubt sind nur "normal" und Prozentwerte. Längenangaben wie px, em oder negative Werte lösen einen SyntaxError aus, und der alte Wert bleibt erhalten.
Der Prozentwert bezieht sich auf die verwendete Schriftgröße, nicht auf die Units-per-Em der Schriftdatei.
Eine Wirkung ist nur bei line-height: normal zu sehen. Hat das Element eine feste line-height, ändert sich die Zeilenhöhe nicht.
Es wird nur dieses FontFace-Objekt verändert. Bestehende @font-face-Regeln im Stylesheet bleiben unberührt.

Siehe auch

ContactAddress.postalCode FontFace.descentOverride FontFace.ascentOverride FontFace.unicodeRange FontFace.loaded