FontFaceSet.has() — Methode · JavaScript-Referenz

Signatur

FontFaceSet.prototype.has(fontFace)

Beschreibung

Die Methode has() der Schnittstelle FontFaceSet verhält sich wie Set.prototype.has(): Sie liefert true, wenn genau das übergebene FontFace-Objekt in der Menge enthalten ist, sonst false. Das wichtigste FontFaceSet ist document.fonts. In Web-Workern ist es self.fonts.

Man nutzt has() vor allem bei Schriften, die per Skript mit new FontFace() erzeugt wurden. Damit lässt sich zum Beispiel verhindern, dass dieselbe Schrift doppelt mit add() registriert wird, oder prüfen, ob eine Schrift vor dem Entfernen mit delete() überhaupt vorhanden ist.

Wichtig: Der Vergleich läuft über die Objektidentität, nicht über den Familiennamen oder die Deskriptoren. Ein neues FontFace mit identischer family und src gilt als anderes Objekt. Ob eine Schrift mit einem bestimmten Namen verfügbar und geladen ist, prüft man stattdessen mit FontFaceSet.check().

Parameter

Name	Typ	Default	Beschreibung
$fontFace Pflicht	FontFace		Das `FontFace`-Objekt, nach dem in der Menge gesucht wird.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das FontFace-Objekt in der Menge enthalten ist, sonst false.

Beispiele

Einfache Prüfung vor und nach add()

const inter = new FontFace('Inter', 'url(/fonts/Inter.woff2)');

console.log(document.fonts.has(inter)); // noch nicht registriert
document.fonts.add(inter);
console.log(document.fonts.has(inter));

false true

Doppelte Registrierung vermeiden

const fontCache = new Map();

const ensureFont = async (family, url) => {
  let face = fontCache.get(family);
  if (!face) {
    face = new FontFace(family, `url(${url})`);
    fontCache.set(family, face);
  }
  if (!document.fonts.has(face)) {
    document.fonts.add(face);
    await face.load();
  }
  return face;
};

await ensureFont('Roboto', '/fonts/Roboto.woff2');
await ensureFont('Roboto', '/fonts/Roboto.woff2'); // wird nicht erneut hinzugefügt
console.log(document.fonts.size);

1 (plus eventuell per CSS eingebundene @font-face-Schriften)

Fallstrick: Identität statt Name

const a = new FontFace('Lato', 'url(/fonts/Lato.woff2)');
const b = new FontFace('Lato', 'url(/fonts/Lato.woff2)');

document.fonts.add(a);
console.log(document.fonts.has(a));
console.log(document.fonts.has(b)); // gleiche Deskriptoren, aber anderes Objekt

true false

Schrift sicher entfernen

const removeFont = (face) => {
  if (document.fonts.has(face)) {
    document.fonts.delete(face);
    console.log(`${face.family} entfernt`);
  } else {
    console.log(`${face.family} war nicht registriert`);
  }
};

const mono = new FontFace('MyMono', 'url(/fonts/MyMono.woff2)');
document.fonts.add(mono);
removeFont(mono);
removeFont(mono);

MyMono entfernt MyMono war nicht registriert

// Wichtig · Fallstricke

Objektidentität: has() vergleicht Referenzen. Wer prüfen will, ob eine Schriftfamilie nutzbar ist, sollte document.fonts.check('16px Lato') verwenden.
CSS-Schriften: Schriften aus @font-face-Regeln sind zwar in document.fonts enthalten, man kommt an diese Objekte aber nur über Iteration heran (z. B. [...document.fonts] oder forEach()). Erst danach kann man sie sinnvoll an has() übergeben.
Kein Ladestatus: true heißt nur, dass die Schrift registriert ist, nicht dass sie geladen ist. Den Ladestatus zeigt fontFace.status.
Falscher Typ: Wird ein Wert übergeben, der kein FontFace ist, werfen manche Engines einen TypeError, statt false zurückzugeben.
Kompatibilität: Unterstützt in Chrome, Edge, Firefox und Safari. In Workern steht die Methode über self.fonts zur Verfügung, abhängig vom Browser.

Siehe auch

FontFaceSet FontFaceSet.add() FontFaceSet.delete() FontFaceSet.check() FontFaceSet.load() FontFace Document.fonts Set.prototype.has()