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.

Die FontData Schnittstelle der Local Font Access API repräsentiert einen einzelnen lokalen Schriftschnitt.

Instanz-Eigenschaften

FontData.family Schreibgeschützt Experimentell

Gibt die Familie des Schriftschnittes zurück.

FontData.fullName Schreibgeschützt Experimentell

Gibt den vollständigen Namen des Schriftschnittes zurück.

FontData.postscriptName Schreibgeschützt Experimentell

Gibt den PostScript-Namen des Schriftschnittes zurück.

FontData.style Schreibgeschützt Experimentell

Gibt den Stil des Schriftschnittes zurück.

Instanz-Methoden

FontData.blob() Experimentell

Gibt ein Promise zurück, das mit einem Blob 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.

js
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.

js
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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
FontData
Experimental
blob
Experimental
family
Experimental
fullName
Experimental
postscriptName
Experimental
style
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

Siehe auch