FontFaceSet.values() — Methode · JavaScript-Referenz

Signatur

FontFaceSet.prototype.values()

Beschreibung

Die Methode values() des FontFaceSet-Interfaces gibt ein neues Iterator-Objekt zurück, das jedes enthaltene FontFace-Objekt in der Reihenfolge liefert, in der es eingefügt wurde. FontFaceSet verhält sich dabei wie ein Set. Deshalb ist values() identisch mit keys() und auch mit FontFaceSet.prototype[Symbol.iterator].

Meist erreichst du das Set über document.fonts (im Hauptthread) oder über self.fonts (in Workern). Mit values() kannst du alle registrierten Schriften durchgehen, zum Beispiel um ihren Ladezustand (status) zu prüfen, Schriftfamilien aufzulisten oder bestimmte Schriften gezielt mit load() nachzuladen.

Zum Set gehören Schriften, die per CSS-@font-face deklariert wurden, und Schriften, die per JavaScript mit document.fonts.add() hinzugefügt wurden. Der Iterator ist live: Elemente, die während der Iteration hinzukommen, werden in der Regel noch geliefert.

Rückgabewert

Typ

SetIterator<FontFace>

Beschreibung

Ein neuer Iterator, dessen next()-Aufrufe nacheinander die FontFace-Objekte des Sets in Einfügereihenfolge liefern.

Beispiele

Alle Schriften des Dokuments auflisten

// Alle Schriften durchgehen, die im Dokument bekannt sind
for (const font of document.fonts.values()) {
  console.log(`${font.family} ${font.weight} ${font.style} – ${font.status}`);
}

"Roboto" 400 normal – loaded "Roboto" 700 normal – unloaded

Iterator manuell mit next() abfragen

const iterator = document.fonts.values();
const first = iterator.next();

if (!first.done) {
  console.log('Erste Schrift:', first.value.family);
} else {
  console.log('Keine Schriften registriert');
}

Erste Schrift: "Roboto"

Nicht geladene Schriften gezielt nachladen

const loadPending = async () => {
  const pending = [...document.fonts.values()]
    .filter((font) => font.status === 'unloaded');

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

loadPending().catch(console.error);

1 Schrift(en) nachgeladen

Per JavaScript hinzugefügte Schrift finden

const font = new FontFace('Brand', 'url(/fonts/brand.woff2)', { weight: '600' });
document.fonts.add(font);

const families = new Set(
  Array.from(document.fonts.values(), (f) => f.family.replace(/"/g, ''))
);
console.log(families.has('Brand'));

true

// Wichtig · Fallstricke

values() ist ein Alias von keys() und entspricht dem Standard-Iterator. Daher funktioniert for (const f of document.fonts) genauso.
Die Werte von family können Anführungszeichen enthalten (z. B. "\"Roboto\""). Entferne sie, bevor du Namen vergleichst.
Die Iteration löst kein Laden aus. Schriften, die per CSS deklariert, aber noch nicht verwendet wurden, haben den Status "unloaded". Wenn du warten willst, bis die Schriften geladen sind, nutze document.fonts.ready oder load().
Firefox und Chromium liefern CSS-@font-face-Regeln unterschiedlich zuverlässig. Schriften aus Cross-Origin-Stylesheets können fehlen.
In Workern steht das Set über self.fonts zur Verfügung. Ältere Browser unterstützen es dort nicht.
Fingerprinting: Über dieses Set lassen sich nur Webfonts auflisten, keine lokal installierten Systemschriften.

Siehe auch

Document.fonts FontFaceSet.has() FontFaceSet.add() FontFaceSet.clear() FontFaceSet.delete()