FontData
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.
Die FontData
Schnittstelle der Local Font Access API repräsentiert einen einzelnen lokalen Schriftschnitt.
Instanz-Eigenschaften
FontData.family
Nur lesbar Experimentell-
Gibt die Familie des Schriftschnittes zurück.
FontData.fullName
Nur lesbar Experimentell-
Gibt den vollständigen Namen des Schriftschnittes zurück.
FontData.postscriptName
Nur lesbar Experimentell-
Gibt den PostScript-Namen des Schriftschnittes zurück.
FontData.style
Nur lesbar Experimentell-
Gibt den Stil des Schriftschnittes zurück.
Instanz-Methoden
FontData.blob()
Experimentell-
Gibt ein
Promise
zurück, das mit einemBlob
erfüllt wird, der die rohen Bytes der zugrunde liegenden Schriftdatei enthält.
Beispiele
Für eine funktionierende Live-Demo, siehe Font Select Demo.
Schriftarten Aufzählung
Der folgende Ausschnitt fragt alle verfügbaren Schriftarten ab und protokolliert Metadaten. Dies könnte beispielsweise verwendet werden, um ein Font-Picker-Steuerelement zu füllen.
async function logFontData() {
try {
const availableFonts = await window.queryLocalFonts();
for (const fontData of availableFonts) {
console.log(fontData.postscriptName);
console.log(fontData.fullName);
console.log(fontData.family);
console.log(fontData.style);
}
} catch (err) {
console.error(err.name, err.message);
}
}
Zugriff auf niedrigstufige Daten
Die blob()
Methode bietet Zugriff auf niedrigstufige SFNT Daten — dies ist ein Schriftdateiformat, das andere Schriftformate wie PostScript, TrueType, OpenType oder Web Open Font Format (WOFF) enthalten kann.
async function computeOutlineFormat() {
try {
const availableFonts = await window.queryLocalFonts({
postscriptNames: ["ComicSansMS"],
});
for (const fontData of availableFonts) {
// `blob()` returns a Blob containing valid and complete
// SFNT-wrapped font data.
const sfnt = await fontData.blob();
// Slice out only the bytes we need: the first 4 bytes are the SFNT
// version info.
// Spec: https://learn.microsoft.com/en-us/typography/opentype/spec/otff#organization-of-an-opentype-font
const sfntVersion = await sfnt.slice(0, 4).text();
let outlineFormat = "UNKNOWN";
switch (sfntVersion) {
case "\x00\x01\x00\x00":
case "true":
case "typ1":
outlineFormat = "truetype";
break;
case "OTTO":
outlineFormat = "cff";
break;
}
console.log("Outline format:", outlineFormat);
}
} catch (err) {
console.error(err.name, err.message);
}
}
Spezifikationen
Specification |
---|
Local Font Access # fontdata-interface |
Browser-Kompatibilität
BCD tables only load in the browser