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.family Schreibgeschützt Experimentell: Gibt die Familie des Schriftschnitts zurück.
FontData.fullName Schreibgeschützt Experimentell: Gibt den vollständigen Namen des Schriftschnitts zurück.
FontData.postscriptName Schreibgeschützt Experimentell: Gibt den PostScript-Namen des Schriftschnitts zurück.
FontData.style Schreibgeschützt Experimentell: Gibt den Stil des Schriftschnitts zurück.

Instanz-Methoden

FontData.blob() Experimentell: Gibt ein Promise zurück, das mit einem Blob erfü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);
  }
}

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