Local Font Access API

Konzepte und Nutzung

Webfonts waren revolutionr, indem sie Typografie im Web ermglichten, da sie Webdesignern erlauben, benutzerdefinierte Schriften bereitzustellen, die in einem Webdokument verwendet werden knnen. Angegeben ber die @font-face-Regel, kann ein Webfont von einer in der url()-Funktion bereitgestellten URL geladen werden.

@font-face hat mehrere andere ntzliche Funktionen. Insbesondere knnen Sie den vollstndigen Namen oder Postscript-Namen der Schriftart in der Funktion local() angeben, um dem Browser mitzuteilen, dass er eine lokale Kopie verwenden soll, wenn der Benutzer die Schriftart auf seinem Computer installiert hat. Dies ist nicht ohne Probleme local() ist berchtigt geworden als ein Fingerprinting-Vektor.

Darber hinaus waren High-End-Designtools historisch schwer im Web bereitzustellen, aufgrund von Herausforderungen bei der genauen Schrifterkennung und dem Zugriff auf niedere Schriftartdaten (zum Beispiel, um Filter und Transformationen anzuwenden). Aktuelle Apps verlassen sich oft auf Workarounds, wie zum Beispiel den Benutzern zu bitten, ihre Schriftarten auf einen Server hochzuladen, wo sie verarbeitet werden, um Rohdatendaten zu erhalten, oder ein separates lokales Programm zu installieren, um zustzliche Funktionen bereitzustellen.

Die Local Font Access API wurde erstellt, um diese Probleme zu lsen.

Die Methode Window.queryLocalFonts() bietet Zugriff auf ein Array lokal installierter Schriften, die jeweils durch eine FontData-Objektinstanz reprsentiert werden. FontData hat mehrere Eigenschaften, die Zugriff auf Namen, Stile und Familien bieten, und es hat auch eine blob()-Methode, die Zugriff auf ein Blob bietet, das die Rohdaten der zugrunde liegenden Schriftartdatei enthlt.

In Bezug auf Datenschutz und Sicherheit:

• Die Local Font Access API ist so konzipiert, dass sie nur den Zugang zu den Daten bietet, die zur Lsung der oben genannten Probleme erforderlich sind. Es gibt auch keine Anforderung an Browser, die vollstndige Liste der verfgbaren lokalen Schriften bereitzustellen oder die Daten in derselben Reihenfolge zu liefern, wie sie auf der Festplatte erscheinen.
• Wenn Window.queryLocalFonts() aufgerufen wird, wird der Benutzer um Erlaubnis gebeten, auf seine lokalen Schriftarten zuzugreifen. Der Status dieser Erlaubnis kann ber die Permissions API abgefragt werden (die Berechtigung local-fonts).
• Sie knnen den Zugang zu dieser Funktion mit einer local-fonts Permissions Policy steuern.

Schnittstellen

FontData

Reprsentiert ein einzelnes lokales Schriftbild.

Erweiterungen zu anderen Schnittstellen

Window.queryLocalFonts()

Gibt ein Promise zurck, das mit einem Array von FontData-Objekten erfllt wird, die die lokal verfgbaren Schriftbilder reprsentieren.

Beispiele

Fr eine funktionierende Live-Demo, siehe unser Local Font Access API-Demo.

Feature-Erkennung

if ("queryLocalFonts" in window) {
  // The Local Font Access API is supported
}

Schriftarten-Aufzhlung

Das folgende Snippet fragt nach allen verfgbaren Schriftarten und protokolliert Metadaten. Dies knnte verwendet werden, um beispielsweise ein Schriftarten-Auswahlsteuerung zu fllen.

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 Schriftartdateiformat, das andere Schriftformate enthalten kann, wie PostScript, TrueType, OpenType oder 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

Browser-Kompatibilitt

Siehe auch

• Verwenden Sie erweiterte Typografie mit lokalen Schriftarten
• @font-face
• Die local-fonts-Richtlinie Permissions Policy