Verwenden Sie erweiterte Typografie mit lokalen Schriftarten

Sichere Schriftarten für das Web

Wenn Sie lange genug Webentwicklung betrieben haben, können Sie sich an den Anruf erinnern sichere Web-Schriftarten. Es ist bekannt, dass diese Schriftarten auf fast allen am häufigsten verwendeten Betriebssystemen verfügbar sind (nämlich Windows, MacOS, die gängigsten Linux-Distributionen, Android und iOS). In den frühen 2000er Jahren führte Microsoft sogar eine Initiative namens Top TrueType-Schriftarten für das Web Wer hat diese Schriftarten zum kostenlosen Download bereitgestellt, mit dem Ziel, dass "Wenn Sie eine Website besuchen, auf der sie angegeben sind, werden die Seiten genau so angezeigt, wie es der Website-Designer beabsichtigt hat.". Ja, dies schloss die Websites ein, die in eingerichtet wurden Comic ohne MS. Hier ist ein klassischer Stapel web-sicherer Schriftarten (mit dem letzten Ausweg von
serifenlos

Quelle) könnte so aussehen:

Körper {
Schriftfamilie: Helvetica, Arial, serifenlos;
}

Web-Schriftarten

Die Zeiten, in denen sichere Web-Schriftarten wirklich wichtig waren, sind lange vorbei. Heute haben wir Web-SchriftartenEinige davon sind sogar variable Quellen, die wir noch weiter modifizieren können, indem wir die Werte der verschiedenen exponierten Achsen ändern. Sie können Web-Schriftarten verwenden, indem Sie a deklarieren
@ Schriftart

Block am Anfang des CSS, der die Schriftartdatei oder die herunterzuladenden Dateien angibt:

@ Schriftart {
Schriftfamilie: "FlamboyantSansSerif";
src: URL("flamboyant.woff2");
}

Danach können Sie die benutzerdefinierte Webschrift verwenden, indem Sie die angeben
Schriftfamilie, wie gewöhnlich:

Körper {
Schriftfamilie: "FlamboyantSansSerif";
}

Lokale Quellen als Fingerabdruckvektor

Die meisten Webquellen stammen aus dem Internet. Eine interessante Tatsache ist jedoch, dass die
src

Eigentum in der @ Schriftart Aussage, abgesehen von der
url ()

Funktion, akzeptiert auch a
lokal()

Funktion. Dadurch können benutzerdefinierte Schriftarten lokal geladen werden (Überraschung!). Wenn der Benutzer hat FlamboyantSansSerif Auf Ihrem Betriebssystem installiert, wird die lokale Kopie verwendet, anstatt sie herunterzuladen:

@ Schriftart {
Schriftfamilie: "FlamboyantSansSerif";
src: lokal("FlamboyantSansSerif"),
URL("flamboyant.woff2");
}

Dieser Ansatz bietet einen guten Sicherungsmechanismus, der möglicherweise Bandbreite spart. Im Internet können wir leider keine schönen Dinge haben. Das Problem mit dem lokal() Die Funktion besteht darin, dass es für Browser-Fingerabdrücke missbraucht werden kann. Es stellt sich heraus, dass die Liste der von einem Benutzer installierten Schriftarten gut identifizierbar ist. Viele Unternehmen haben ihre eigenen Unternehmensschriftarten, die auf Mitarbeiter-Laptops installiert sind. Zum Beispiel hat Google eine Unternehmensschrift namens Google Sans.

Ein Angreifer kann versuchen, festzustellen, für welches Unternehmen jemand arbeitet, indem er die Existenz einer großen Anzahl von Unternehmensquellen nachweist, die als bekannt sind Google Sans. Der Angreifer würde versuchen, den in diesen Schriftarten festgelegten Text auf einer Leinwand zu rendern und die Glyphen zu messen. Wenn die Glyphen mit der bekannten Form der Unternehmensschriftart übereinstimmen, ist der Angreifer erfolgreich. Wenn die Glyphen nicht übereinstimmen, weiß der Angreifer, dass eine Standardersatzschrift verwendet wurde, da die Unternehmensschrift nicht installiert wurde. Ausführliche Informationen zu diesem und anderen Fingerabdruckangriffen des Browsers finden Sie im Umfragepapier von Laperdix et al.

Abgesehen von Firmenschriftarten kann auch nur die Liste der installierten Schriftarten identifiziert werden. Die Situation mit diesem Angriffsvektor ist so schlimm geworden, dass kürzlich das WebKit-Team beschlossen zu "Enthält nur [in der Liste der verfügbaren Schriftarten] Web-Schriftarten und Schriftarten, die mit dem Betriebssystem geliefert werden, jedoch keine lokal installierten, vom Benutzer installierten Schriftarten.". (Und hier bin ich mit einem Artikel über die Gewährung des Zugangs zu lokalen Quellen.)

Die lokale Quellzugriffs-API

Der Anfang dieses Artikels hat Sie möglicherweise in schlechte Laune versetzt. Können wir nicht wirklich schöne Dinge haben? Keine Sorge. Wir glauben, dass wir es können und vielleicht nicht alles ist verzweifelt. Aber lassen Sie mich zunächst eine Frage beantworten, die Sie sich vielleicht fragen.

Warum benötigen wir die lokale API für den Schriftzugriff, wenn Web-Schriftarten vorhanden sind?

In der Vergangenheit war es schwierig, Grafik- und Designtools in professioneller Qualität im Web anzubieten. Eine Hürde war die Unfähigkeit, auf alle vorgeschlagenen und professionell erstellten Schriftarten zuzugreifen und diese zu verwenden, die Designer lokal installiert haben. Web-Schriftarten ermöglichen einige Veröffentlichungsanwendungsfälle, ermöglichen jedoch keinen programmgesteuerten Zugriff auf Vektor-Glyphenformen und Schriftarten-Tabellen, die von Rasterisierern zum Rendern von Glyphen-Konturen verwendet werden. Es gibt auch keine Möglichkeit, auf Binärdaten von einer Webquelle zuzugreifen.

• Entwurfstools benötigen Zugriff auf Schriftbytes, um ihre eigene OpenType-Entwurfsimplementierung durchzuführen und die Verbindung von Entwurfstools auf niedrigeren Ebenen zu ermöglichen, z. B. zum Durchführen von Vektorfiltern oder Transformationen für Glyphenformen.
• Entwickler können ältere Schriftstapel für ihre Anwendungen haben, die sie ins Web bringen. Um diese Stapel verwenden zu können, benötigen sie im Allgemeinen direkten Zugriff auf Schriftdaten, was Web-Schriftarten nicht bieten.
• Einige Schriftarten sind möglicherweise nicht für die Verbreitung über das Internet lizenziert. Zum Beispiel hat Linotype eine Lizenz für einige Schriftarten, die nur enthält Desktop-Nutzung.

Die Local Source Access API ist ein Versuch, diese Herausforderungen zu lösen. Es besteht aus zwei Teilen:

• EIN API zur Aufzählung von SchriftartenHiermit können Benutzer Zugriff auf alle verfügbaren Systemschriftarten gewähren.
• Aus jedem Aufzählungsergebnis die Fähigkeit, eine niedrige Ebene anzufordern (byteorientiert) Zugriff auf den SFNT-Container Dies beinhaltet die vollständigen Daten der Quelle.

Tatsächlicher Zustand

Verwendung der lokalen API für den Schriftzugriff

Aktivierung über chrome: // flags

Aktivieren Sie diese Option, um lokal mit der API für den lokalen Schriftzugriff zu experimentieren #font-Zugriff Flagge an chrome://flags.

Funktionserkennung

Verwenden Sie Folgendes, um zu überprüfen, ob die lokale API für den Schriftzugriff unterstützt wird:

wenn ('fonts' im Navigator) {
}

Um Erlaubnis fragen

Der Zugriff auf die lokalen Quellen eines Benutzers ist hinter dem blockiert "local-fonts" Erlaubnis, mit der Sie anfordern können
navigator.permissions.request ().

try {
const Status = erwarten Navigator.permissions.request({
Süßkartoffel: 'local-fonts',
});
wenn (Status.Zustand !== 'granted') {
throw new Error('Permission to access local fonts not granted.');
}
} catch(err) {
wenn (err.Süßkartoffel !== 'TypeError') {
throw err;
}
}

Aufzählung lokaler Quellen

Sobald die Erlaubnis erteilt wurde, können Sie von der FontManager Schnittstelle, die in ausgesetzt ist navigator.fonts, Anruf query () um den Browser zur Eingabe lokal installierter Schriftarten aufzufordern. Dies führt zu einem asynchronen Iterator, den Sie in a durchlaufen können
auf warten ... von

Aussage. Jede Schriftart wird als dargestellt FontMetadata Objekt mit Eigenschaften
Familia (beispielsweise, "Comic Sans MS"), vollständiger Name (beispielsweise, "Comic Sans MS"), Y. postscriptName (beispielsweise, "ComicSansMS").

const fonts = Navigator.fonts.Abfrage();
try {
zum erwarten (const Metadaten of fonts) {
console.Log(Metadaten.postscriptName);
console.Log(Metadaten.vollständiger Name);
console.Log(Metadaten.Familia);
}
} catch (err) {
console.Error(err.Süßkartoffel, err.Botschaft);
}

Zugriff auf SFNT-Daten

Voll SFNT
Der Zugang ist über die blob () Methode von FontMetadata Objekt. SFNT ist ein Schriftdateiformat, das andere Schriftarten enthalten kann, z. B. PostScript, TrueType, OpenType, WOFF (Web Open Font Format) und andere.

const fonts = Navigator.fonts.Abfrage();
try {
zum erwarten (const Metadaten of fonts) {
wenn (Metadaten.Familia !== 'Comic Sans MS') {
fortsetzen;
}
const sfnt = erwarten Metadaten.Klecks();
const sfntVersion = (new TextDecoder).decode(
erwarten sfnt.slice(0, 4).arrayBuffer());
Lassen outlineFormat = 'UNKNOWN';
switch (sfntVersion) {
case 'x00x01x00x00':
case 'true':
case 'typ1':
outlineFormat = 'truetype';
brechen;
case 'OTTO':
outlineFormat = 'cff';
brechen;
}
console.Log('Outline format:', outlineFormat);
}
} catch (err) {
console.Error(err.Süßkartoffel, err.Botschaft);
}

Manifestation

Sie können die lokale Quellzugriffs-API in Aktion in sehen
Manifestation unter. Überprüfen Sie auch die
Quellcode. Die Demo zeigt ein benutzerdefiniertes Element namens Dies implementiert eine lokale Schriftartenauswahl.

Datenschutzüberlegungen

das "local-fonts" Die Genehmigung scheint eine hoch bedruckbare Oberfläche zu bieten. Browser können jedoch alles zurückgeben, was sie wollen. Beispielsweise können anonymitätsorientierte Browser nur eine Reihe von Standardschriftarten bereitstellen, die in den Browser integriert sind. Ebenso müssen Browser Tabellendaten nicht genau so bereitstellen, wie sie auf der Festplatte angezeigt werden.

Wann immer möglich, ist die lokale Quellzugriffs-API so konzipiert, dass genau die Informationen verfügbar gemacht werden, die zum Aktivieren der genannten Anwendungsfälle erforderlich sind. System-APIs können eine Liste der installierten Schriftarten nicht in zufälliger oder geordneter Reihenfolge, sondern in der Reihenfolge der Schriftinstallation erstellen. Wenn Sie genau die Liste der installierten Schriftarten zurückgeben, die von der System-API bereitgestellt werden, können zusätzliche Daten verfügbar gemacht werden, die für den Fingerabdruck verwendet werden können. Die Anwendungsfälle, die wir aktivieren möchten, werden durch Beibehalten dieser Reihenfolge nicht unterstützt. Daher erfordert diese API, dass die zurückgegebenen Daten sortiert werden, bevor sie zurückgegeben werden.

Sicherheit und Berechtigungen

Das Chrome-Team hat die lokale Schriftzugriffs-API unter Verwendung der in definierten Grundprinzipien entworfen und implementiert Steuern Sie den Zugriff auf leistungsstarke Funktionen der Webplattform, einschließlich Benutzerkontrolle, Transparenz und Ergonomie.

Nutzerkontrolle

Der Zugriff auf die Quellen eines Benutzers unterliegt vollständig seiner Kontrolle und ist nur zulässig, wenn der Benutzer dies tut "local-fonts" Erlaubnis, wie in der angegeben
Registrierung zulassenEs wird gewährt.

Transparenz

Wenn einer Site Zugriff auf die lokalen Quellen des Benutzers gewährt wurde, wird diese in der angezeigt
Site-Informationsblatt.

Berechtigungspersistenz

das "local-fonts" Die Berechtigung wird zwischen dem erneuten Laden der Seite beibehalten. Es kann durch die widerrufen werden Seiteninformation Bettdecke.

Feedback

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

Erzählen Sie uns etwas über das API-Design

Gibt es etwas in der API, das nicht wie erwartet funktioniert? Oder fehlen Ihnen Methoden oder Eigenschaften, die Sie zur Umsetzung Ihrer Idee benötigen? Haben Sie eine Frage oder einen Kommentar zum Sicherheitsmodell? Legen Sie ein Spezifikationsproblem in der entsprechenden Datei ab GitHub-Repositoryoder fügen Sie Ihre Gedanken zu einem bestehenden Problem hinzu.

Melden Sie ein Problem mit der Bereitstellung

Haben Sie einen Fehler bei der Chrome-Implementierung gefunden? Oder unterscheidet sich die Implementierung von der Spezifikation? Einen Fehler einreichen new.crbug.com. Stellen Sie sicher, dass Sie so viele Details wie möglich, einfache Anweisungen zum Reproduzieren und Eingeben enthalten Blinken> Schriftarten beim Komponenten (bearbeiten) Box. Fehler funktioniert hervorragend für das schnelle und einfache Teilen von Wiederholungen.

API-Unterstützung anzeigen

Denken Sie darüber nach, die Local Font Access API zu verwenden? Ihr öffentlicher Support hilft dem Chrome-Team bei der Priorisierung von Funktionen und zeigt anderen Browser-Anbietern, wie wichtig es ist, diese zu unterstützen.

Senden Sie einen Tweet an @Cromodev mit dem #LocalFontAccess Hashtag und lassen Sie uns wissen, wo und wie Sie es verwenden.

Nützliche Links

Vielen Dank

Die API-Spezifikation für den lokalen Quellzugriff wurde von bearbeitet
Emil A. Eklund,
Alex Russell,
Joshua Glockey
Olivier Yiptong. Dieser Artikel wurde von überprüft
Joe Medley,
Dominik Röttschesy
Olivier Yiptong. Heldenbild von Brett Jordan im Unsplash.