WorkerGlobalScope.fonts — Eigenschaft · JavaScript-Referenz

Signatur

WorkerGlobalScope.fonts

Beschreibung

self.fonts ist das Gegenstück zu document.fonts im Worker-Kontext. Die Eigenschaft gehört zur CSS Font Loading API und gibt ein FontFaceSet zurück. Darüber kann ein Worker Schriftarten laden, hinzufügen, prüfen und entfernen, ohne den Haupt-Thread zu blockieren.

Am häufigsten braucht man das beim Rendern von Text auf einem OffscreenCanvas in einem Web Worker. Ein Worker hat kein Dokument und damit keine @font-face-Regeln aus CSS. Eigene Webfonts muss man deshalb per new FontFace(...) anlegen, mit load() laden und mit self.fonts.add() registrieren. Erst dann erkennt ctx.font = "16px MeineSchrift" die Schrift.

Das FontFaceSet verhält sich wie ein Set: Es gibt add(), delete(), has(), clear(), size, forEach() und Iteration mit for...of. Dazu kommen load(), check(), das Promise ready, die Eigenschaft status sowie die Ereignisse loading, loadingdone und loadingerror.

Rückgabewert

Typ

FontFaceSet

Beschreibung

Das FontFaceSet des aktuellen Worker-Kontexts. Die Eigenschaft ist nur lesbar, das zurückgegebene Objekt kann aber verändert werden (add(), delete() usw.).

Beispiele

Webfont im Worker laden und auf OffscreenCanvas nutzen

// worker.js
self.addEventListener('message', async (event) => {
  const canvas = event.data.canvas; // übertragenes OffscreenCanvas
  const ctx = canvas.getContext('2d');

  const font = new FontFace('Inter', 'url(/fonts/Inter.woff2)', { weight: '700' });
  await font.load();
  self.fonts.add(font);

  ctx.font = '700 32px Inter';
  ctx.fillText('Hallo aus dem Worker', 20, 50);
  console.log('Schriften im Worker:', self.fonts.size);
});

// main.js
const offscreen = document.querySelector('canvas').transferControlToOffscreen();
const worker = new Worker('worker.js');
worker.postMessage({ canvas: offscreen }, [offscreen]);

Schriften im Worker: 1

Prüfen, ob eine Schrift bereits verfügbar ist

// worker.js
const ensureFont = async (family, url) => {
  if (self.fonts.check(`16px ${family}`)) return;
  const face = new FontFace(family, `url(${url})`);
  self.fonts.add(face);
  await self.fonts.load(`16px ${family}`);
};

await ensureFont('Roboto', '/fonts/Roboto.woff2');
await self.fonts.ready;
console.log(self.fonts.status, self.fonts.check('16px Roboto'));

loaded true

Registrierte Schriften auflisten und Ladefehler abfangen

// worker.js
if ('fonts' in self) {
  self.fonts.addEventListener('loadingerror', (e) => {
    console.warn('Fehler beim Laden:', e.fontfaces.map((f) => f.family));
  });

  for (const face of self.fonts) {
    console.log(face.family, face.weight, face.status);
  }
} else {
  console.log('FontFaceSet im Worker nicht unterstützt');
}

Inter 700 loaded

// Wichtig · Fallstricke

Getrennte Schriftsätze: self.fonts im Worker und document.fonts im Haupt-Thread sind unabhängig voneinander. Eine im Dokument geladene Schrift ist im Worker nicht verfügbar und umgekehrt. Deshalb muss jeder Kontext seine Schriften selbst laden.
Kein CSS: Im Worker gibt es keine @font-face-Regeln. Man muss jede Schrift per new FontFace() und fonts.add() registrieren. Nur new FontFace() reicht nicht; ohne add() kennt das Canvas die Schrift nicht.
Browser-Unterstützung: In Chromium und Firefox vorhanden, in Safari fehlt die Eigenschaft je nach Version. Vorher mit 'fonts' in self prüfen und notfalls auf das Rendern im Haupt-Thread ausweichen.
CORS: Schriften von fremden Domains brauchen gültige CORS-Header (Access-Control-Allow-Origin), sonst schlägt load() fehl. Außerdem muss die CSP-Direktive font-src die Quelle erlauben.
check() kann auch true zurückgeben, wenn keine passende Schrift registriert ist, weil dann nichts geladen werden muss. Wer sicher gehen will, kombiniert es mit has() oder durchsucht das Set nach family.

Siehe auch

FontFaceSet FontFace Document.fonts WorkerGlobalScope OffscreenCanvas FontFaceSet.prototype.load() ServiceWorkerGlobalScope.clients