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
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.
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
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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).