Local Font Access API

Webfonts waren bahnbrechend, da sie es Webdesignern ermöglichten, benutzerdefinierte Schriftarten für ein Webdokument bereitzustellen. Über die @font-face-At-Regel spezifiziert, kann ein Webfont über eine in der url()-Funktion angegebene URL geladen werden.

@font-face bietet mehrere weitere nützliche Funktionen. Insbesondere können Sie den vollständigen Namen oder den Postscript-Namen der Schriftart innerhalb der local()-Funktion angeben, damit der Browser eine lokale Kopie verwendet, wenn der Benutzer die Schrift auf seinem Computer installiert hat. Dies geht nicht ohne Probleme einher — local() ist als Fingerprinting-Vektor berüchtigt geworden.

Darüber hinaus war es historisch gesehen schwierig, hochmoderne Designwerkzeuge im Web bereitzustellen, da es Herausforderungen bei der genauen Schrifterfassung und dem Zugriff auf niedrigstufige Schriftartdaten gab (z. B. um Filter und Transformationen anzuwenden). Aktuelle Apps greifen oft auf Umgehungen zurück, wie z. B. das Anfordern der Nutzer ihre Schriften auf einen Server hochzuladen, wo sie verarbeitet werden, um Rohdaten zu erhalten, oder die Installation eines separaten lokalen Programms, um zusätzliche Funktionen bereitzustellen.

Die Local Font Access API wurde entwickelt, um diese Probleme zu lösen.

Die Methode Window.queryLocalFonts() bietet Zugriff auf ein Array von lokal installierten Schriftarten, die jeweils durch ein FontData Objektinstanz dargestellt werden. FontData hat mehrere Eigenschaften, die Zugang zu Namen, Stilen und Familien bieten, und es hat auch eine Methode blob(), die Zugriff auf ein Blob gewährt, das die Rohdaten der zugrunde liegenden Schriftdatei enthält.

In Bezug auf Datenschutz und Sicherheit:

• Die Local Font Access API ist so konzipiert, dass nur auf die Daten zugegriffen wird, die zur Lösung der oben genannten Probleme erforderlich sind. Es gibt auch keine Anforderung für Browser, die vollständige Liste der verfügbaren lokalen Fonts bereitzustellen oder die Daten in der gleichen Reihenfolge anzuzeigen, 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 local-fonts-Berechtigung).
• Sie können den Zugriff auf diese Funktion über eine local-fonts Berechtigungsrichtlinie steuern.

FontData

Repräsentiert eine einzelne lokale Schriftart.

Window.queryLocalFonts()

Gibt ein Promise zurück, das mit einem Array von FontData-Objekten erfüllt wird, die die lokal verfügbaren Schriftarten darstellen.

Für eine funktionierende Live-Demo siehe Font Select Demo.

Das folgende Snippet fragt nach allen verfügbaren Schriftarten und protokolliert Metadaten. Dies könnte beispielsweise verwendet werden, um ein Schriftenauswahl-Steuerelement 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 Methode blob() bietet Zugang zu niedrigstufigen SFNT-Daten — dies ist ein Schriftformat, 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);
  }
}

• Erweiterte Typografie mit lokalen Fonts verwenden
• @font-face
• Die Direktive local-fonts Berechtigungsrichtlinie