Local Font Access API

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.

Die Local Font Access API bietet einen Mechanismus zum Zugriff auf die lokal installierten Schriftdateien der Benutzer — hierzu gehören höherstufige Informationen wie Namen, Stile und Familien sowie die Rohdaten der zugrunde liegenden Schriftdateien.

Konzepte und Verwendung

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.

Schnittstellen

FontData

Repräsentiert eine einzelne lokale Schriftart.

Erweiterungen zu anderen Schnittstellen

Window.queryLocalFonts()

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

Beispiele

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

Funktionsüberprüfung

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

Schriften-Auflistung

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.

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

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch