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 vor der Verwendung auf produktiven Webseiten.
Das FontData Interface der Local Font Access API repräsentiert einen einzelnen lokalen Schriftschnitt.
Instanz-Eigenschaften
FontData.familySchreibgeschützt Experimentell-
Gibt die Familie des Schriftschnitts zurück.
FontData.fullNameSchreibgeschützt Experimentell-
Gibt den vollständigen Namen des Schriftschnitts zurück.
FontData.postscriptNameSchreibgeschützt Experimentell-
Gibt den PostScript-Namen des Schriftschnitts zurück.
FontData.styleSchreibgeschützt Experimentell-
Gibt den Stil des Schriftschnitts zurück.
Instanz-Methoden
FontData.blob()Experimentell-
Gibt ein
Promisezurück, das mit einemBloberfüllt wird, der die Rohbytes der zugrunde liegenden Schriftdatei enthält.
Beispiele
Für ein Live-Beispiel sehen Sie sich unser Local Font Access API Demo an.
Schrifterkennung
Der folgende Codeausschnitt fragt alle verfügbaren Schriften ab und gibt Metadaten aus. Dies könnte beispielsweise verwendet werden, um eine Schriftauswahl-Steuerung 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 Low-Level-Daten
Die blob() Methode ermöglicht den Zugriff auf Low-Level SFNT Daten — dies ist ein Schriftdateiformat, das andere Schriftformate enthalten kann, wie PostScript, TrueType, OpenType oder das Web Open Font Format (WOFF).
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 API # fontdata-interface |
Browser-Kompatibilität
Loading…