Verwenden Sie erweiterte Typografie mit lokalen Schriftarten

Descubra cómo la API de acceso a fuentes locales le permite acceder a las fuentes instaladas localmente del Nutzername y obtener detalles de bajo nivel sobre ellas.

24. August 2020

Fuentes seguras para la Netz

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 que proporcionó estas fuentes para su descarga gratuita con el Ziel de que "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

bloque al comienzo del CSS, que especifica el archivo o archivos de fuentes que se descargarán:

@ 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() La función es que se puede abusar de él para la toma de huellas digitales del Browser. Resulta que la lista de fuentes que ha instalado un usuario puede resultar bastante identificable. Muchas empresas tienen sus propias fuentes corporativas que se instalan en las computadoras portátiles de los empleados. Por ejemplo, Google tiene una fuente corporativa llamada 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?

Históricamente, las herramientas de diseño y gráficos de calidad profesional han sido difíciles de ofrecer en la web. Un obstáculo ha sido la imposibilidad de acceder y utilizar la variedad completa de fuentes sugeridas y construidas por profesionales que los diseñadores han instalado localmente. Las fuentes web habilitan algunos casos de uso de publicación, pero no habilitan el acceso mediante Programmierung a las formas de glifos vectoriales y las tablas de fuentes utilizadas por los rasterizadores para representar los contornos de glifos. Asimismo, no hay forma de acceder a los datos binarios de una fuente web.

• Las herramientas de diseño necesitan acceso a bytes de fuente para realizar su propia implementación de diseño OpenType y permitir que las herramientas de diseño se conecten en niveles inferiores, para acciones como realizar Filter vectoriales o transformaciones en las formas de glifos.
• 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" el permiso parece proporcionar una superficie altamente imprimible. Sin embargo, los Browser pueden devolver lo que quieran. Por ejemplo, los navegadores centrados en el anonimato pueden optar por proporcionar solo un conjunto de fuentes predeterminadas integradas en el navegador. De manera similar, los navegadores no están obligados a proporcionar datos de tabla exactamente como aparecen en el disco.

Siempre que Sein posible, la API de acceso a fuentes locales está diseñada para exponer exactamente la información necesaria para habilitar los casos de uso mencionados. Las API del sistema pueden producir una lista de fuentes instaladas no en un orden aleatorio o ordenado, sino en el orden de instalación de fuentes. Devolver exactamente la lista de fuentes instaladas proporcionada por dicha API del sistema puede exponer datos adicionales que pueden usarse para la toma de huellas digitales, y los casos de uso que queremos habilitar no son asistidos por retener este orden. Como resultado, esta API requiere que los datos devueltos se ordenen antes de ser devueltos.

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.

Sende ein Tweet zu @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.