FontFaceSet.size — Eigenschaft · JavaScript-Referenz

Signatur

get FontFaceSet.size

Beschreibung

Die Eigenschaft size gehört zum Interface FontFaceSet aus der CSS Font Loading API. Sie ist schreibgeschützt und liefert die Anzahl der FontFace-Objekte, die das Set gerade enthält. Meistens greifen Sie darüber zu: document.fonts.size. In Web Workern heißt der Zugriff self.fonts.size.

Gezählt werden alle Schriftschnitte im Set, egal ob sie schon geladen sind. Dazu gehören Schriften, die Sie per document.fonts.add() hinzugefügt haben, und Schriften aus @font-face-Regeln in eingebundenen Stylesheets. Jeder Schnitt zählt einzeln. Eine Schriftfamilie mit den Stärken 400 und 700 ergibt also den Wert 2.

FontFaceSet verhält sich wie ein Set. size entspricht daher Set.prototype.size. Die Eigenschaft ist nützlich, um Fehler bei der Schrifteinbindung zu finden, um zu prüfen, ob dynamisch hinzugefügte Schriften angekommen sind, oder um Schriften für Oberflächen zu zählen. Wie viele Schriften schon geladen sind, erfahren Sie nur über den Zustand der einzelnen Einträge (FontFace.status).

Rückgabewert

Typ

number

Beschreibung

Eine ganze Zahl ≥ 0: die aktuelle Anzahl der FontFace-Objekte im Set.

Beispiele

Anzahl registrierter Schriften abfragen

// Zählt alle Schriftschnitte im Dokument (aus @font-face und per JavaScript hinzugefügte)
console.log(`Registrierte Schriftschnitte: ${document.fonts.size}`);

Registrierte Schriftschnitte: 4

Größe vor und nach add()/delete() vergleichen

const inter = new FontFace(
  'Inter',
  'url(/fonts/inter-var.woff2) format("woff2")',
  { weight: '100 900' }
);

const vorher = document.fonts.size;
document.fonts.add(inter);
console.log(document.fonts.size - vorher); // 1

document.fonts.delete(inter);
console.log(document.fonts.size === vorher); // true

1 true

Geladene und ausstehende Schriften zählen

const fontStatistik = async () => {
  await document.fonts.ready;
  const alle = [...document.fonts];
  const geladen = alle.filter((f) => f.status === 'loaded').length;
  console.log(`${geladen} von ${document.fonts.size} Schnitten geladen`);
};

fontStatistik();

2 von 4 Schnitten geladen

Schriften in einem Web Worker zählen

// worker.js
const font = new FontFace('Roboto', 'url(/fonts/roboto.woff2)');
self.fonts.add(font);
await font.load();
self.postMessage({ anzahl: self.fonts.size });

{ anzahl: 1 }

// Wichtig · Fallstricke

Geladen und registriert sind zwei verschiedene Dinge: size zählt auch Schriften mit dem Status unloaded oder error. Aus size > 0 folgt also nicht, dass eine Schrift nutzbar ist. Prüfen Sie dafür FontFace.status, document.fonts.check() oder document.fonts.ready.
Unterschiede zwischen Browsern: Die Browser zählen Schriften aus CSS (@font-face) nicht zu jedem Zeitpunkt gleich. Das betrifft vor allem Stylesheets, die noch nicht geparst sind, und Stylesheets von anderen Ursprüngen. Direkt nach dem Seitenstart kann der Wert deshalb schwanken. Warten Sie auf document.fonts.ready oder DOMContentLoaded.
Jeder Schriftschnitt ist ein eigener Eintrag. Eine Familie mit mehreren Stärken oder Stilen zählt also mehrfach.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wie document.fonts.size = 0 ignoriert der Browser stillschweigend; im Strict Mode löst sie einen TypeError aus. Zum Leeren dient clear(). Diese Methode entfernt aber nur Schriften, die per JavaScript hinzugefügt wurden, keine aus CSS.
Kompatibilität: Chrome, Edge, Firefox und Safari unterstützen die Eigenschaft in aktuellen Versionen. self.fonts in Workern gibt es erst in neueren Browserversionen.

Siehe auch

Document.fonts FontFaceSet.ready FontFaceSet.status FontFace.style FontFace.family