Signatur
Beschreibung
Die Eigenschaft style eines FontData-Objekts gibt den Stil des lokal installierten Schriftschnitts als String zurück, z. B. "Regular", "Bold Italic" oder "Condensed Light". Der Wert stammt aus der Namenstabelle der Schriftdatei (OpenType-Subfamily-Name). FontData-Objekte erhält man über window.queryLocalFonts() aus der Local Font Access API.
Typische Einsatzzwecke sind Design-Werkzeuge, Grafik- und Textverarbeitungsanwendungen im Browser. Dort sollen Nutzer eine Schriftfamilie (family) auswählen und danach einen konkreten Schnitt (style). Mit style kann man die Schnitte einer Familie gruppieren, sortieren und in einer Auswahlliste anzeigen.
Beachte: style ist ein freier Text aus der Schriftdatei und kein CSS-Wert. Er entspricht nicht der CSS-Eigenschaft font-style (normal/italic/oblique). Die Bezeichnungen hängen vom Hersteller ab („Bold“, „Fett“, „Heavy“, „Black“ …) und können lokalisiert sein. Wenn du eine Schrift gezielt per CSS ansprechen willst, nimm besser postscriptName oder fullName zusammen mit local() in @font-face.
Rückgabewert
"Regular", "Bold" oder "Italic". Die Eigenschaft ist schreibgeschützt.Beispiele
Stile aller lokalen Schriften ausgeben
// Muss durch eine Nutzeraktion ausgelöst werden (z. B. Klick)
document.querySelector('#fonts-laden').addEventListener('click', async () => {
try {
const fonts = await window.queryLocalFonts();
for (const font of fonts.slice(0, 5)) {
console.log(`${font.family} – ${font.style}`);
}
} catch (err) {
console.error('Zugriff verweigert oder nicht unterstützt:', err.name);
}
});Schnitte nach Familie gruppieren (z. B. für ein Auswahlmenü)
const gruppiereNachFamilie = async () => {
const fonts = await window.queryLocalFonts();
const familien = new Map();
for (const { family, style } of fonts) {
if (!familien.has(family)) familien.set(family, []);
familien.get(family).push(style);
}
return familien;
};
button.addEventListener('click', async () => {
const familien = await gruppiereNachFamilie();
console.log(familien.get('Georgia'));
});Nur bestimmte Schnitte filtern und per @font-face nutzen
button.addEventListener('click', async () => {
const fonts = await window.queryLocalFonts();
// style ist Freitext – daher tolerant vergleichen
const fett = fonts.filter((f) => /bold|fett/i.test(f.style));
const erste = fett[0];
if (!erste) return;
const face = new FontFace('MeineFett', `local("${erste.postscriptName}")`);
await face.load();
document.fonts.add(face);
document.body.style.fontFamily = 'MeineFett, sans-serif';
console.log(`Verwende ${erste.fullName} (Stil: ${erste.style})`);
});// Wichtig · Fallstricke
- Experimentell und eingeschränkt verfügbar: Die Local Font Access API gibt es nur in Chromium-Browsern (Chrome, Edge, Opera ab Version 103) auf dem Desktop. Firefox und Safari unterstützen sie nicht. Prüfe die Unterstützung vorher mit
'queryLocalFonts' in window. - Berechtigung und Kontext:
queryLocalFonts()funktioniert nur in einem sicheren Kontext (HTTPS), braucht eine Nutzeraktion (transiente Aktivierung) und die Berechtigunglocal-fonts. Die Permissions-Policylocal-fontskann den Zugriff in iframes sperren. Lehnt der Nutzer ab, wird einSecurityErrorbzw.NotAllowedErrorausgelöst. - Kein CSS-Wert:
styleist kein gültiger Wert für die CSS-Eigenschaftfont-style. Übernimm ihn nicht direkt ins CSS. Leite Gewicht und Kursivschrift nur mit Vorsicht aus dem String ab, weil Hersteller unterschiedliche und teils lokalisierte Namen verwenden. - Datenschutz: Die Liste der installierten Schriften eignet sich zum Fingerprinting. Frage sie deshalb nur ab, wenn du sie wirklich brauchst.