FontData.fullName — Eigenschaft · JavaScript-Referenz

Signatur

FontData.fullName

Beschreibung

Die Eigenschaft fullName der Schnittstelle FontData gibt den vollständigen, gut lesbaren Namen eines Schriftschnitts zurück. Er setzt sich meist aus Familienname und Stil zusammen, z. B. "Helvetica Neue Light" oder "Arial Bold Italic". Der Wert stammt aus der Name-Tabelle der Schriftdatei (OpenType-Name-ID 4).

FontData-Objekte erhält man über die Local Font Access API, genauer über window.queryLocalFonts(). Damit können Webanwendungen wie Grafik- oder Textprogramme die auf dem Gerät installierten Schriften auflisten und dem Nutzer in einem Schriftmenü anbieten.

fullName eignet sich vor allem als Anzeigename in Auswahllisten. Zum Gruppieren nach Familien sollte man family nutzen, als eindeutigen Schlüssel für CSS oder queryLocalFonts({ postscriptNames }) hingegen postscriptName.

Rückgabewert

Typ

string

Beschreibung

Der vollständige Name des Schriftschnitts, z. B. "Roboto Medium Italic". Schreibgeschützt.

Beispiele

Vollständige Namen aller lokalen Schriften ausgeben

const listFonts = async () => {
  try {
    // Muss durch eine Nutzergeste ausgelöst werden
    const fonts = await window.queryLocalFonts();
    fonts.slice(0, 3).forEach((font) => console.log(font.fullName));
  } catch (err) {
    console.error('Zugriff verweigert oder nicht unterstützt:', err.name);
  }
};

document.querySelector('#fonts-btn').addEventListener('click', listFonts);

Arial Arial Bold Arial Bold Italic

Schriftauswahl-Menü mit fullName als Anzeigetext

const select = document.querySelector('#font-select');

document.querySelector('#load-fonts').addEventListener('click', async () => {
  if (!('queryLocalFonts' in window)) {
    select.append(new Option('Local Font Access nicht verfügbar', ''));
    return;
  }
  const fonts = await window.queryLocalFonts();
  fonts
    .sort((a, b) => a.fullName.localeCompare(b.fullName, 'de'))
    .forEach((font) => {
      // Anzeige: fullName, Wert: eindeutiger postscriptName
      select.append(new Option(font.fullName, font.postscriptName));
    });
});

Schnitte einer Familie mit fullName, family und style vergleichen

const showFamily = async (familyName) => {
  const fonts = await window.queryLocalFonts();
  const rows = fonts
    .filter((f) => f.family === familyName)
    .map(({ fullName, family, style, postscriptName }) => ({ fullName, family, style, postscriptName }));
  console.table(rows);
};

document.querySelector('#show').addEventListener('click', () => showFamily('Arial'));

┌─────────┬─────────────────────┬─────────┬───────────────┬───────────────────────┐ │ (index) │ fullName │ family │ style │ postscriptName │ │ 0 │ 'Arial' │ 'Arial' │ 'Regular' │ 'ArialMT' │ │ 1 │ 'Arial Bold' │ 'Arial' │ 'Bold' │ 'Arial-BoldMT' │ │ 2 │ 'Arial Bold Italic' │ 'Arial' │ 'Bold Italic' │ 'Arial-BoldItalicMT' │ └─────────┴─────────────────────┴─────────┴───────────────┴───────────────────────┘

// Wichtig · Fallstricke

Experimentell & eingeschränkte Unterstützung: Die Local Font Access API gibt es nur in Chromium-basierten Browsern (ab Version 103), und zwar auf Desktop-Systemen. Firefox und Safari unterstützen sie nicht, deshalb vorher mit 'queryLocalFonts' in window prüfen.
Berechtigung & sicherer Kontext: queryLocalFonts() funktioniert nur über HTTPS, braucht eine Nutzergeste (transient activation) und die Berechtigung local-fonts. Lehnt der Nutzer ab oder blockiert eine Permissions-Policy den Zugriff, wird ein SecurityError bzw. NotAllowedError ausgelöst.
Nicht eindeutig: fullName kann lokalisiert sein und sich zwischen Betriebssystemen oder Schriftversionen unterscheiden. Als Schlüssel ist postscriptName besser geeignet.
Datenschutz: Die Liste installierter Schriften lässt sich für Fingerprinting missbrauchen. Deshalb ist der Zugriff an eine Berechtigung gebunden.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird ignoriert (im Strict Mode gibt es einen TypeError).

Siehe auch

FontData Window.queryLocalFonts() FontData.family FontData.postscriptName FontData.style FontData.blob() FontFace.variant