Erweiterte Typografie mit lokalen Schriftarten verwenden

Hier erfahren Sie, wie Sie über die Local Font Access API auf die lokal installierten Schriftarten des Nutzers zugreifen und Low-Level-Details zu den Schriftarten abrufen können

Thomas Steiner

Websichere Schriftarten

Wenn Sie sich lange genug mit der Webentwicklung beschäftigt haben, erinnern Sie sich vielleicht an die sogenannten für das Web geeignete Schriftarten. Diese Schriftarten sind bekanntermaßen auf fast allen Instanzen der am häufigsten verwendeten Betriebssysteme verfügbar (nämlich Windows, macOS, die gängigsten Linux-Distributionen, Android und iOS). Anfang der 2000er-Jahre Microsoft war an der Spitze Initiative namens TrueType Core Fonts for the Web, die diese Schriftarten mit der dass "bei jedem Besuch einer Website, auf der diese angegeben sind, die Seiten genau so angezeigt vom Website-Designer beabsichtigt“. Ja, das umfasste Websites, die hier festgelegt wurden: Comic Sans MS. Hier ist ein klassischer websicherer Font Stack (mit dem ultimativen Fallback sans-serif Schriftart) könnte wie folgt aussehen:

body {
  font-family: Helvetica, Arial, sans-serif;
}

Web-Schriftarten

Die Zeiten, in denen websichere Schriftarten so wichtig waren, sind längst vorbei. Heute haben wir Web-Schriftarten, von denen einige auch variable Schriftarten, die wir weiter optimieren können, indem wir die Werte für den verschiedenen sichtbaren Achsen. Sie können Webschriftarten verwenden, indem Sie ein @font-face-Block am Anfang des CSS-Codes, gibt an, welche Schriftartdatei(en) heruntergeladen werden sollen:

@font-face {
  font-family: 'FlamboyantSansSerif';
  src: url('flamboyant.woff2');
}

Anschließend können Sie die benutzerdefinierte Webschriftart verwenden, indem Sie die Methode font-family:

body {
  font-family: 'FlamboyantSansSerif';
}

Lokale Schriftarten als Fingerabdruckvektor

Die meisten Webschriftarten stammen aus dem Web. Interessant ist jedoch, Property src in @font-face Erklärung, abgesehen von den url() kann auch ein local() . So können benutzerdefinierte Schriftarten lokal geladen werden. Wenn Nutzende zufällig eine FlamboyantSansSerif installiert haben, wird die lokale Kopie statt der wie oft sie heruntergeladen wird:

@font-face {
  font-family: 'FlamboyantSansSerif';
  src: local('FlamboyantSansSerif'), url('flamboyant.woff2');
}

Dieser Ansatz bietet einen netten Fallback-Mechanismus, der potenziell Bandbreite spart. Im Internet können wir keine schönen Dinge haben. Das Problem mit der Funktion local() ist, Browser-Fingerprinting missbraucht wird. Wie sich herausstellt, kann die Liste der Schriftarten, die ein Nutzer installiert hat, identifizieren können. Viele Unternehmen haben ihre eigenen Unternehmensschriftarten, die auf den Laptops. Google hat beispielsweise eine Unternehmensschriftart namens Google Sans.

</ph> <ph type="x-smartling-placeholder">

Ein Angreifer kann herausfinden, für welches Unternehmen jemand arbeitet, indem er die Existenz viele bekannte Unternehmensschriftarten wie Google Sans zur Verfügung stellen. Der Angreifer versuchte, Text auf einer Leinwand festlegen und die Glyphen messen. Wenn die Glyphen der bekannten Form des Unternehmensschriftart ein, hat der Angreifer einen Treffer. Wenn die Glyphen nicht übereinstimmen, weiß der Angreifer, dass ein Standard-Ersatzschriftart wurde verwendet, da die Unternehmensschriftart nicht installiert wurde. Weitere Informationen zu und andere Browser-Fingerprinting-Angriffe finden Sie in der Umfragepapier von Laperdix et al.

Unternehmensschriftarten auseinanderzuhalten, kann sogar schon eine Liste der installierten Schriftarten eindeutig identifiziert werden. Die Situation mit Dieser Angriffsvektor ist so schlecht geworden, dass das WebKit-Team entschlossen "nur [in der Liste verfügbare Schriftarten] Web-Schriftarten und Schriftarten enthalten, System, aber nicht lokal vom Nutzer installierte Schriftarten“. (Und hier ist ein Artikel darüber, wie Sie zu lokalen Schriftarten.)

Die Local Font Access API

Der Anfang dieses Artikels hat Sie möglicherweise in eine negative Stimmung geraten. Können wir wirklich keine schönen Dinge? Kein Problem. Wir glauben, dass wir können, und vielleicht nichts ist hoffnungslos. Aber zuerst möchte ich Ihnen eine Frage beantworten, die Sie sich vielleicht selbst stellen könnten.

Warum wird die Local Font Access API benötigt, wenn Webschriftarten vorhanden sind?

Professionelle Design- und Grafiktools waren bisher schwer zu liefern, Web. Ein Stolperstein ist die Unfähigkeit, die gesamte Vielfalt beruflich erstellte und mit Anmerkungen versehene Schriftarten, die Designschaffende lokal installiert haben. Web-Schriftarten ermöglichen einige Veröffentlichungen aber keinen programmatischen Zugriff auf die Tabellen mit den Vektorglyphenformen und Schriftarten ermöglichen, um die Glyphenumrisse zu rendern. Ebenso gibt es keine Möglichkeit, auf das Binärprogramm einer Webschriftart zuzugreifen. Daten.

• Designtools benötigen Zugriff auf Schriftbytes, um ihre eigene OpenType-Layoutimplementierung durchzuführen und Designtools, die Sie auch auf niedrigeren Ebenen einsetzen können, z. B. für die Durchführung von Vektorfiltern oder die Glyphenformen verändert werden.
• Entwickler haben möglicherweise alte Schriftartstacks für ihre Anwendungen, die sie ins Web holen. Um diese Stapel zu verwenden, benötigen sie normalerweise direkten Zugriff auf Schriftartdaten, was bei Webschriftarten nicht der Fall ist. bereitstellen.
• Einige Schriftarten sind möglicherweise nicht für die Bereitstellung über das Web lizenziert. Linotype hat beispielsweise eine Lizenz für Bei einigen Schriftarten ist die Verwendung auf Desktop-Computern eingeschränkt.

Die Local Font Access API ist ein Versuch, diese Herausforderungen zu meistern. Sie besteht aus zwei Teilen:

• Eine API zur Aufzählung von Schriftarten, mit der Nutzer Zugriff auf alle verfügbaren Systeme gewähren können Schriftarten.
• Fähigkeit, aus jedem Aufzählungsergebnis einen (byteorientierten) SFNT-Container auf niedriger Ebene anzufordern einschließlich aller Schriftartdaten.

Unterstützte Browser

Local Font Access API verwenden

Funktionserkennung

So prüfen Sie, ob die Local Font Access API unterstützt wird:

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

Lokale Schriftarten auflisten

Um eine Liste der lokal installierten Schriftarten zu erhalten, musst du window.queryLocalFonts() aufrufen. Die Beim ersten Mal wird eine Berechtigungsaufforderung ausgelöst, die der Nutzer genehmigen oder ablehnen kann. Wenn der Nutzer genehmigt, dass ihre lokalen Schriftarten für die Abfrage abgefragt werden, dann gibt der Browser ein Array mit Daten zu Schriftarten zurück. die Sie wiederholen können. Jede Schriftart wird als FontData-Objekt mit den Eigenschaften family dargestellt. (z. B. "Comic Sans MS"), fullName (z. B. "Comic Sans MS"), postscriptName (für z. B. "ComicSansMS") und style (z. B. "Regular").

// Query for all available fonts and log metadata.
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);
}

Wenn Sie nur an einem Teil der Schriftarten interessiert sind, können Sie sie auch basierend auf dem PostScript-Code filtern. indem Sie einen postscriptNames-Parameter hinzufügen.

const availableFonts = await window.queryLocalFonts({
  postscriptNames: ['Verdana', 'Verdana-Bold', 'Verdana-Italic'],
});

Auf SFNT-Daten zugreifen

Der vollständige SFNT-Zugriff ist über die blob()-Methode des FontData-Objekt. SFNT ist ein Schriftartdateiformat, das andere Schriftarten wie PostScript, TrueType, OpenType, Web Open Font Format (WOFF) und weitere Schriftarten

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://docs.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);
}

Demo

Sie können die Local Font Access API in Aktion in der Demo unten. Sehen Sie sich auch die Quellcode. Die Demo zeigt ein benutzerdefiniertes Element namens <font-select> an, das eine lokale Schriftartauswahl implementiert.

Überlegungen zum Datenschutz

Die Berechtigung „"local-fonts"“ scheint eine stark fingerabdruckbare Oberfläche zu bieten. Sie können jedoch können Browser beliebige Ergebnisse zurückgeben. Zum Beispiel können Browser, die auf Anonymität ausgerichtet sind, um nur eine Reihe standardmäßiger Schriftarten im Browser bereitzustellen. Außerdem sind Browser nicht erforderlich, Tabellendaten genau so bereitstellen, wie sie auf dem Laufwerk erscheinen.

Wo immer möglich, ist die Local Font Access API so konzipiert, dass nur die Informationen die für die Umsetzung der erwähnten Anwendungsfälle erforderlich sind. System-APIs können eine Liste installierter Schriftarten erstellen, die sich nicht in einem in einer zufälligen oder sortierten Reihenfolge, aber in der Reihenfolge der Schriftartinstallation. Es wird genau die Liste die von einem solchen System-API bereitgestellten Schriftarten installiert sind, können zusätzliche Daten zur Verfügung stellen, die für Fingerprinting und Anwendungsfälle, die wir aktivieren möchten, werden nicht durch die Beibehaltung dieser Reihenfolge unterstützt. Als führt, müssen die zurückgegebenen Daten vor der Rückgabe sortiert werden.

Sicherheit und Berechtigungen

Das Chrome-Team hat die Local Font Access API nach den Grundprinzipien entwickelt und implementiert. wie unter Zugriff auf leistungsstarke Webplattform-Funktionen steuern beschrieben, einschließlich Transparenz und Ergonomie.

Nutzersteuerung

Der Zugriff auf die Schriftarten eines Nutzers liegt vollständig unter der Kontrolle des Nutzers und ist nur zulässig, wenn die "local-fonts", wie in den Berechtigungsregistrierung gewährt wird.

Transparenz

Ob einer Website Zugriff auf die lokalen Schriftarten des Nutzers gewährt wurde, ist in der Infoblatt für Websites.

Berechtigungstreue

Die Berechtigung "local-fonts" bleibt zwischen Seitenladevorgängen erhalten. Er kann über die Website-Informationen.

Feedback

Das Chrome-Team möchte mehr über Ihre Erfahrungen mit der Local Font Access API erfahren.

Informationen zum API-Design

Gibt es etwas an der API, das nicht wie erwartet funktioniert? Oder fehlen Methoden, oder Eigenschaften, die Sie für die Umsetzung Ihrer Idee benötigen? Fragen oder Kommentare zur Sicherheit haben Modell? Reichen Sie ein Spezifikationsproblem im entsprechenden GitHub-Repository ein oder fügen Sie Ihre Gedanken zu einem Problem zu beheben.

Problem mit der Implementierung melden

Haben Sie bei der Implementierung von Chrome einen Fehler gefunden? Oder weicht die Implementierung von der Spezifikation ab? Melde einen Fehler unter new.crbug.com. Geben Sie so viele Details wie möglich an, Anweisungen zum Reproduzieren und gib Blink>Storage>FontAccess in das Feld Komponenten ein. Glitch eignet sich hervorragend, um schnelle und einfache Reproduktionen zu teilen.

Unterstützung für die API anzeigen

Möchtest du die Local Font Access API verwenden? Ihre öffentliche Unterstützung hilft dem Chrome-Team, Funktionen priorisieren und anderen Browseranbietern zeigen, wie wichtig es für ihre Unterstützung ist.

Sende einen Tweet mit dem Hashtag an @ChromiumDev #LocalFontAccess und lassen Sie wo und wie Sie sie nutzen.

Nützliche Links

• Erklärung
• Entwurf der Spezifikationen
• Chromium-Fehler bei der Aufzählung von Schriftarten
• Chromium-Fehler beim Zugriff auf die Schriftarttabelle
• ChromeStatus-Eintrag
• GitHub-Repository
• TAG-Überprüfung
• Position von Mozilla-Standards

Danksagungen

Die Spezifikation für die Local Font Access API wurde von Emil A. Eklund Alex Russell, Joshua Bell und Olivier Yiptong Artikel wurde geprüft von Joe Medley, Dominik Röttsches und Olivier Yiptong Hero-Image von Brett Jordan auf Unsplash (Unsplash).