FontData.blob() — Methode · JavaScript-Referenz

Signatur

FontData.prototype.blob()

Beschreibung

Die Methode blob() gehört zum Interface FontData der Local Font Access API. Ein FontData-Objekt steht für eine einzelne, auf dem System installierte Schriftart. Solche Objekte erhält man über window.queryLocalFonts(). Mit blob() liest man die vollständige Schriftartdatei (z. B. TrueType, OpenType/CFF) als Binärdaten aus.

Das ist vor allem für Design- und Grafikanwendungen im Browser gedacht, etwa Bildbearbeitung, Vektor-Editoren oder PDF-Erzeugung. Dort muss man Glyphen selbst rendern, Schriftdateien einbetten oder Tabellen wie cmap, glyf oder name mit einer Bibliothek wie opentype.js oder fontkit auswerten. Über Blob.prototype.arrayBuffer() kommt man an die Bytes und kann sie z. B. an einen FontFace-Konstruktor übergeben.

Der zurückgegebene Blob enthält die unveränderte SFNT-Datei. Welches Format sie hat, zeigen die ersten vier Bytes: 0x00010000 oder true steht für TrueType, OTTO für OpenType mit CFF-Outlines. Bei ttcf handelt es sich um eine Font-Collection.

Rückgabewert

Typ

Promise<Blob>

Beschreibung

Ein Promise, das mit einem Blob erfüllt wird. Der Blob enthält die rohen Bytes der zugrunde liegenden Schriftartdatei. Wird der Zugriff verweigert oder schlägt das Lesen fehl, wird das Promise abgelehnt.

Beispiele

Schriftformat anhand der SFNT-Signatur bestimmen

// Muss durch eine Benutzeraktion ausgelöst werden (z. B. Klick)
document.querySelector('#fonts-btn').addEventListener('click', async () => {
  try {
    const fonts = await window.queryLocalFonts({ postscriptNames: ['Arial-BoldMT'] });
    for (const font of fonts) {
      const blob = await font.blob();
      // Nur die ersten 4 Bytes lesen
      const header = await blob.slice(0, 4).arrayBuffer();
      const tag = new DataView(header).getUint32(0);

      let format = 'unbekannt';
      if (tag === 0x00010000 || tag === 0x74727565) format = 'TrueType';
      else if (tag === 0x4f54544f) format = 'OpenType (CFF)';
      else if (tag === 0x74746366) format = 'Font-Collection (TTC)';

      console.log(`${font.fullName}: ${format}, ${blob.size} Bytes`);
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
});

Arial Bold: TrueType, 980756 Bytes

Lokale Schrift als FontFace laden und verwenden

const loadLocalFont = async (postscriptName, cssFamily) => {
  const [font] = await window.queryLocalFonts({ postscriptNames: [postscriptName] });
  if (!font) throw new Error(`Schrift ${postscriptName} nicht gefunden`);

  const buffer = await (await font.blob()).arrayBuffer();
  const face = new FontFace(cssFamily, buffer);
  await face.load();
  document.fonts.add(face);
  return face;
};

document.querySelector('#apply').addEventListener('click', async () => {
  await loadLocalFont('Georgia', 'MeineGeorgia');
  document.body.style.fontFamily = 'MeineGeorgia, serif';
  console.log('Schrift geladen');
});

Schrift geladen

Schriftdatei als Download anbieten

const downloadFont = async (fontData) => {
  const blob = await fontData.blob();
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `${fontData.postscriptName}.ttf`;
  a.click();
  URL.revokeObjectURL(url); // Speicher wieder freigeben
};

document.querySelector('#export').addEventListener('click', async () => {
  const fonts = await window.queryLocalFonts();
  if (fonts.length) await downloadFont(fonts[0]);
});

// Wichtig · Fallstricke

Browser-Kompatibilität: Die API ist experimentell und nur in Chromium-Browsern verfügbar (Chrome/Edge ab 103). Firefox und Safari unterstützen sie nicht. Vorher prüfen, z. B. mit if ('queryLocalFonts' in window).
Sicherer Kontext und Berechtigung: Die API funktioniert nur über HTTPS. Außerdem braucht sie die Berechtigung "local-fonts", die meist eine Benutzeraktion wie einen Klick voraussetzt. In iframes muss die Permissions Policy local-fonts den Zugriff erlauben. Fehlt die Berechtigung, lehnt schon queryLocalFonts() mit einem SecurityError ab.
Datenschutz: Die installierten Schriften eignen sich zum Fingerprinting. Deshalb fragt der Browser ausdrücklich nach. Rechne damit, dass Nutzer den Zugriff verweigern, und sieh einen Ausweichweg vor.
Lizenzrecht: Nur weil man die Rohbytes lesen kann, darf man die Schrift noch nicht weitergeben. Viele Schriftlizenzen verbieten es, die Datei hochzuladen, einzubetten oder weiterzuverteilen.
Performance: Schriftdateien können mehrere Megabyte groß sein, besonders CJK-Schriften. Rufe blob() nur für wirklich benötigte Schriften auf. Wenn nur der Header interessiert, lies mit blob.slice() gezielt Teilbereiche.
Bei Font-Collections (ttcf) enthält der Blob unter Umständen die ganze Sammlung und nicht nur die einzelne Schrift.

Siehe auch

Window.queryLocalFonts() FontData Blob Blob.prototype.arrayBuffer() FontFace FontData.postscriptName PushMessageData.blob()