Window: queryLocalFonts() Methode

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.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Die window.queryLocalFonts() Methode gibt ein Promise zurück, das mit einem Array von FontData Objekten erfüllt wird, die die lokal verfügbaren Schriftarten darstellen.

Um diese Methode zu verwenden, muss der Benutzer die Berechtigung zum Zugriff auf local-fonts erteilen (der Berechtigungsstatus kann über die Permissions API abgefragt werden). Darüber hinaus kann diese Funktion durch eine Berechtigungsrichtlinie blockiert werden, die auf Ihrem Server festgelegt ist.

Syntax

js
queryLocalFonts(options)

Parameter

options Optional

Enthält optionale Konfigurationsparameter. Derzeit ist nur eine Eigenschaft definiert:

postscriptNames Optional

Ein Array von PostScript-Namen der Schriften. Wenn dies angegeben ist, werden nur Schriftarten mit PostScript-Namen, die mit den Einträgen im Array übereinstimmen, in die Ergebnisse aufgenommen; andernfalls werden alle Schriftarten in die Ergebnisse aufgenommen.

Rückgabewert

Ein Promise, das mit einem Array von FontData Objekten erfüllt wird, die die lokal verfügbaren Schriftarten darstellen.

Ausnahmen

NotAllowedError DOMException

Der Benutzer hat sich entschieden, die Erlaubnis zur Nutzung dieser Funktion zu verweigern, als er beim ersten Aufruf der Methode mit der Berechtigungsaufforderung des Browsers konfrontiert wurde.

SecurityError DOMException

Die Nutzung dieser Funktion wurde durch eine Berechtigungsrichtlinie blockiert, oder es wurde nicht durch eine Benutzerinteraktion wie einen Tastendruck aufgerufen, oder der aktuelle Origin ist ein undurchsichtiger Origin.

Beispiele

Für eine funktionierende Live-Demo siehe Schriftartenauswahl-Demo.

Schriftarten-Aufzählung

Das folgende Snippet wird alle verfügbaren Schriftarten abfragen und Metadaten protokollieren. Dies könnte beispielsweise verwendet werden, um ein Steuerungselement zur Schriftauswahl 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);
  }
}

Begrenzung der zurückgegebenen Ergebnisse

Um die zurückgegebenen Schriftarten-Daten auf nur eine bestimmte Liste von Schriftarten zu beschränken, verwenden Sie die postscriptNames Option.

js
async function returnSpecificFonts() {
  const availableFonts = await window.queryLocalFonts({
    postscriptNames: ["Verdana", "Verdana-Bold", "Verdana-Italic"],
  });

  return availableFonts;
}

Zugriff auf Low-Level-Daten

Die blob() Methode bietet Zugang zu Low-Level 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 API
# dom-window-querylocalfonts

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
queryLocalFonts
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

Siehe auch