FontFaceSet.entries() — Methode · JavaScript-Referenz

Signatur

FontFaceSet.prototype.entries()

Beschreibung

Die Methode entries() des Interfaces FontFaceSet (erreichbar z. B. über document.fonts oder self.fonts in Workern) gibt einen neuen Iterator zurück. Er durchläuft alle FontFace-Objekte in der Reihenfolge, in der sie eingefügt wurden, und liefert jeweils ein zweielementiges Array [value, value].

Dass Schlüssel und Wert gleich sind, liegt daran, dass sich FontFaceSet wie ein Set verhält und keine eigenen Schlüssel hat. Die Methode gibt es vor allem, damit die API mit Map und Set übereinstimmt. In der Praxis sind values(), forEach() oder direktes for...of über document.fonts meist lesbarer.

Brauchbar ist entries() in generischem Code, der Set-ähnliche Sammlungen einheitlich über Einträge abarbeitet, oder wenn man per Destrukturierung mit [key, value] arbeiten will. Der Iterator ist live: Kommen während des Durchlaufs Schriften hinzu (document.fonts.add()), können sie noch auftauchen.

Rückgabewert

Typ

Iterator<[FontFace, FontFace]>

Beschreibung

Ein neuer Iterator, der für jede enthaltene FontFace ein Array [fontFace, fontFace] liefert, in Einfügereihenfolge.

Beispiele

Alle registrierten Schriften auflisten

// Alle FontFace-Objekte des Dokuments mit Status ausgeben
for (const [key, font] of document.fonts.entries()) {
  console.log(key === font, font.family, font.weight, font.status);
}

true "Inter" "400" "loaded" true "Inter" "700" "unloaded"

Iterator manuell mit next() abfragen

const font = new FontFace('Roboto', 'url(/fonts/roboto.woff2)');
document.fonts.add(font);

const it = document.fonts.entries();
let step = it.next();
while (!step.done) {
  const [, face] = step.value;
  console.log(`${face.family}: ${face.status}`);
  step = it.next();
}

Roboto: unloaded

Noch nicht geladene Schriften gezielt laden

const pending = Array.from(document.fonts.entries())
  .map(([, face]) => face)
  .filter((face) => face.status === 'unloaded');

const loaded = await Promise.all(pending.map((face) => face.load()));
console.log(`${loaded.length} Schrift(en) nachgeladen`);

2 Schrift(en) nachgeladen

// Wichtig · Fallstricke

Doppelter Wert: Jeder Eintrag ist [fontFace, fontFace], nicht [index, fontFace]. Wer einen Index braucht, verwendet Array.from(document.fonts).entries().
Nicht alle Schriften stehen drin: Welche per CSS-@font-face deklarierten Schriften im Set auftauchen, hängt vom Browser ab. Besonders Firefox und Safari listen CSS-Schriften teils erst, nachdem das Stylesheet verarbeitet ist. await document.fonts.ready vor dem Durchlauf sorgt für mehr Verlässlichkeit.
Live-Iterator: Werden während des Durchlaufs Schriften per add()/delete() geändert, wirkt sich das auf den laufenden Iterator aus. Bei Bedarf vorher mit Array.from() einen festen Stand kopieren.
Kompatibilität: Wird in aktuellen Versionen von Chrome, Edge, Firefox und Safari unterstützt. In Web Workern steht das Set über self.fonts zur Verfügung.

Siehe auch

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