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).