Signatur
Beschreibung
Die Eigenschaft stretch einer FontFace-Instanz entspricht dem Deskriptor font-stretch innerhalb einer @font-face-Regel. Sie legt fest, welche Schriftbreite (gestaucht, normal oder gedehnt) diese Schriftdatei abdeckt. Der Browser nutzt diese Angabe bei der Schriftauswahl: Verlangt ein Element im CSS font-stretch: condensed, wählt er innerhalb derselben font-family das FontFace-Objekt mit dem passenden stretch-Wert.
Gültige Werte sind die Schlüsselwörter normal, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded sowie Prozentwerte (z. B. "75%"). Bei variablen Schriften mit einer wdth-Achse kannst du einen Bereich mit zwei Werten angeben, etwa "75% 125%". Standardwert ist "normal".
Setzen lässt sich der Wert entweder über den Deskriptor stretch im Konstruktor new FontFace(family, source, { stretch }) oder nachträglich per Zuweisung. Das ist praktisch, wenn Schriften dynamisch per JavaScript geladen werden, etwa aus einem Nutzer-Upload oder für eine Schriftvorschau. Die Eigenschaft beschreibt nur, welche Breite die Datei abdeckt. Sie verzerrt die Glyphen nicht künstlich.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "normal" | Beim Setzen ein gültiger font-stretch-Deskriptorwert: ein Schlüsselwort, ein Prozentwert oder ein Bereich aus zwei Prozentwerten ("75% 125%"). |
Rückgabewert
font-stretch-Wert der Schrift als String, z. B. "normal", "condensed" oder "75% 125%".Beispiele
Gestauchte Schrift im Konstruktor festlegen
const condensed = new FontFace(
'Roboto',
'url(/fonts/Roboto-Condensed.woff2)',
{ stretch: 'condensed', weight: '400' }
);
console.log(condensed.stretch);
await condensed.load();
document.fonts.add(condensed);
// Im CSS greift nun: .schmal { font-family: Roboto; font-stretch: condensed; }Wert nachträglich ändern
const font = new FontFace('Open Sans', 'url(/fonts/OpenSans-Expanded.woff2)');
console.log(font.stretch); // Standardwert
font.stretch = 'expanded';
console.log(font.stretch);Variable Schrift mit Breitenbereich
const variable = new FontFace(
'Inter Var',
'url(/fonts/InterVariable.woff2)',
{ stretch: '75% 125%', weight: '100 900' }
);
await variable.load();
document.fonts.add(variable);
document.body.style.fontFamily = '"Inter Var"';
document.body.style.fontStretch = '87.5%';
console.log(variable.stretch);Alle geladenen Schriften mit ihrer Breite auflisten
await document.fonts.ready;
for (const face of document.fonts) {
console.log(`${face.family}: ${face.stretch} (${face.status})`);
}// Wichtig · Fallstricke
- Ungültige Werte: Weist du einen ungültigen String zu (z. B.
font.stretch = 'breit'), wirft der Setter einenSyntaxError(DOMException). Übergibst du den ungültigen Wert dagegen im Konstruktor, wird die Schrift fehlerhaft:statuswird"error", undloadedwird abgelehnt. - Keine künstliche Verzerrung:
stretchdehnt die Glyphen nicht. Die Angabe dient nur der Schriftauswahl. Die Schriftdatei muss die gewünschte Breite tatsächlich enthalten, entweder als eigene Datei oder alswdth-Achse einer variablen Schrift. - Serialisierung: Browser können den gelesenen Wert normalisieren. Ein Prozentwert kann also anders zurückkommen, als er gesetzt wurde. Vergleiche Werte deshalb nicht blind als Strings.
- Kompatibilität: Die Eigenschaft wird in Chrome, Edge, Firefox und Safari unterstützt, auch in Web Workern über
self.fonts. Wie gut Bereiche bei variablen Schriften unterstützt werden, hängt von der Browserversion ab. - Änderst du den Wert, nachdem die Schrift mit
document.fonts.add()registriert wurde, wirkt sich das sofort auf die Schriftauswahl aus. Das kann ein erneutes Layout auslösen.