FontData

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

Gibt die Familie des Schriftschnittes zurück.

FontData.fullName Schreibgeschützt

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

FontData.postscriptName Schreibgeschützt

Gibt den PostScript-Namen des Schriftschnittes zurück.

FontData.style Schreibgeschützt

Gibt den Stil des Schriftschnittes zurück.

Instanz-Methoden

FontData.blob()

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
# fontdata-interface

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch