FontFaceSet.forEach() — Methode · JavaScript-Referenz

Signatur

FontFaceSet.prototype.forEach(callbackFn, thisArg)

Beschreibung

Die Methode forEach() des Interfaces FontFaceSet ruft die übergebene Funktion für jedes FontFace-Objekt im Set genau einmal auf. Das bekannteste FontFaceSet ist document.fonts. In Workern gibt es außerdem self.fonts.

FontFaceSet ist ein setartiges Objekt. Deshalb entspricht die Rückruf-Signatur der von Set.prototype.forEach(): Die Funktion bekommt die Schriftart zweimal, einmal als value und einmal als key, und als dritten Wert das Set selbst. Die Reihenfolge ist die Einfügereihenfolge. Zuerst kommen die Schriftarten aus CSS-@font-face-Regeln, danach die per document.fonts.add() hinzugefügten.

Typische Einsatzfälle sind Fehlersuche und Überwachung. Man kann alle bekannten Schriftarten mit Familie, Schnitt und Ladestatus (status) auflisten, gezielt noch nicht geladene Schriftarten nachladen oder dynamisch hinzugefügte Schriftarten wieder entfernen.

Parameter

Name	Typ	Default	Beschreibung
$callbackFn Pflicht	(value: FontFace, key: FontFace, set: FontFaceSet) => void		Funktion, die für jede Schriftart aufgerufen wird. Sie bekommt `value` (die aktuelle `FontFace`), `key` (dasselbe Objekt wie `value`) und `set` (das durchlaufene `FontFaceSet`).
$thisArg	any	undefined	Wert, der beim Aufruf von `callbackFn` als `this` verwendet wird. Bei Pfeilfunktionen hat er keine Wirkung.

Rückgabewert

Typ

undefined

Beschreibung

Die Methode gibt nichts zurück. Sie lässt sich daher nicht wie map() verketten.

Beispiele

Alle Schriftarten des Dokuments auflisten

// Gibt Familie, Schnitt, Stil und Ladestatus jeder Schriftart aus
document.fonts.forEach((font) => {
  console.log(`${font.family} ${font.weight} ${font.style}: ${font.status}`);
});

"Inter" 400 normal: loaded "Inter" 700 normal: unloaded

Nicht geladene Schriftarten gezielt nachladen

const pending = [];

document.fonts.forEach((font) => {
  if (font.status === 'unloaded') {
    pending.push(font.load());
  }
});

const results = await Promise.allSettled(pending);
const failed = results.filter((r) => r.status === 'rejected').length;
console.log(`${results.length} Schriftarten geladen, ${failed} fehlgeschlagen`);

2 Schriftarten geladen, 0 fehlgeschlagen

Dynamisch hinzugefügte Schriftarten wieder entfernen

const brand = new FontFace('Brand', 'url(/fonts/brand.woff2)');
document.fonts.add(brand);

// Erst sammeln, dann entfernen: Änderungen während der Iteration vermeiden
const toRemove = [];
document.fonts.forEach((font) => {
  if (font.family.replace(/"/g, '') === 'Brand') toRemove.push(font);
});
toRemove.forEach((font) => document.fonts.delete(font));

console.log(document.fonts.has(brand));

false

Nutzung von key, set und thisArg

const report = { count: 0 };

document.fonts.forEach(function (value, key, set) {
  console.log(value === key, set === document.fonts);
  this.count++;
}, report);

console.log(`Anzahl: ${report.count} (size: ${document.fonts.size})`);

true true Anzahl: 1 (size: 1)

// Wichtig · Fallstricke

Die Rückruffunktion arbeitet synchron: Mit einer async-Funktion als Rückruf wartet forEach() nicht auf die Promises. Sammle sie stattdessen in einem Array und warte darauf mit Promise.all(). Oder nutze for...of über document.fonts zusammen mit await.
Kein vorzeitiger Abbruch: Mit break oder return lässt sich die Iteration nicht beenden. Dafür eignet sich for (const font of document.fonts).
Welche Schriftarten enthalten sind: CSS-Schriftarten aus @font-face stehen im Set, auch wenn sie noch nicht geladen sind (status === 'unloaded'). Systemschriften wie „Arial“ sind nicht enthalten, sofern sie nicht über @font-face eingebunden werden. Aus CSS stammende Schriftarten lassen sich nicht mit delete() entfernen.
Werte in family: family kann Anführungszeichen enthalten (z. B. "\"Inter\""). Beim Vergleich sollte man sie vorher entfernen.
Browserunterstützung: In aktuellen Versionen von Chrome, Edge, Firefox und Safari verfügbar. In Workern steht self.fonts nicht in allen Browsern zur Verfügung. Deshalb vorher prüfen, ob es existiert.

Siehe auch

FontFaceSet FontFace FontFaceSet.values() FontFaceSet.entries() FontFaceSet.add() FontFaceSet.delete() FontFaceSet.ready Set.prototype.forEach()