Utilisez une typographie avancée avec des polices locales

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

24 août 2020

Fuentes seguras para la la toile

Si vous faites du développement Web depuis assez longtemps, vous vous souvenez peut-être de l'appel polices Web sécurisées. Ces polices sont connues pour être disponibles sur presque toutes les instances des systèmes d'exploitation les plus utilisés (à savoir Windows, macOS, les distributions Linux les plus courantes, Android et iOS). Au début des années 2000, Microsoft a même lancé une initiative appelé Principales polices TrueType pour le Web que proporcionó estas fuentes para su descarga gratuita con el objectif de que "Chaque fois que vous visitez un site Web qui les spécifie, vous verrez les pages exactement comme le concepteur du site l'a prévu". Oui, cela incluait les sites établis en Comic Sans MS. Voici une pile classique de polices Web sécurisées (avec le dernier recours de
sans empattement

source) pourrait ressembler à ceci:

corps {
famille de polices: Helvetica, Arial, sans empattement;
}

Polices Web

L'époque où les polices Web sécurisées importaient vraiment est révolue depuis longtemps. Aujourd'hui nous avons polices Web, dont certaines sont même des sources variables que l'on peut encore plus modifier en changeant les valeurs des différents axes exposés. Vous pouvez utiliser des polices Web en déclarant un
@ font-face

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

@ font-face {
famille de polices: "FlamboyantSansSerif";
src: URL("flamboyant.woff2");
}

Après cela, vous pouvez utiliser la police Web personnalisée en spécifiant le
famille de polices, comme d'habitude:

corps {
famille de polices: "FlamboyantSansSerif";
}

Sources locales comme vecteur d'empreintes digitales

La plupart des sources Web proviennent, eh bien, du Web. Un fait intéressant, cependant, est que le
src

propriété dans le @ font-face déclaration, en dehors de la
URL ()

fonction, accepte également un
local()

une fonction. Cela permet aux polices personnalisées de se charger (surprise!) Localement. Si l'utilisateur a FlamboyantSansSerif installé sur votre système d'exploitation, la copie locale sera utilisée au lieu du téléchargement:

@ font-face {
famille de polices: "FlamboyantSansSerif";
src: local("FlamboyantSansSerif"),
URL("flamboyant.woff2");
}

Cette approche fournit un bon mécanisme de sauvegarde qui économise potentiellement de la bande passante. Sur Internet, malheureusement, nous ne pouvons pas avoir de belles choses. Le problème avec le local() La función es que se puede abusar de él para la toma de huellas digitales del le navigateur. 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.

Un attaquant peut essayer de déterminer pour quelle entreprise une personne travaille en prouvant l'existence d'un grand nombre de sources d'entreprise appelées Google Sans. L'attaquant tenterait de rendre le texte défini dans ces polices sur un canevas et de mesurer les glyphes. Si les glyphes correspondent à la forme connue de la police d'entreprise, l'attaquant réussit. Si les glyphes ne correspondent pas, l'attaquant sait qu'une police de remplacement par défaut a été utilisée car la police d'entreprise n'a pas été installée. Pour plus de détails sur cette attaque et d'autres attaques par empreintes digitales dans le navigateur, lisez le papier d'enquête par Laperdix et coll.

En dehors des polices d'entreprise, même seule la liste des polices installées peut être identifiée. La situation avec ce vecteur d'attaque est devenue si mauvaise que récemment l'équipe WebKit décidé à "Inclut uniquement [dans la liste des polices disponibles] les polices Web et les polices fournies avec le système d'exploitation, mais pas les polices installées par l'utilisateur installées localement". (Et me voici, avec un article sur l'octroi de l'accès aux sources locales.)

L'API d'accès à la source locale

Le début de cet article vous a peut-être mis de mauvaise humeur. Ne pouvons-nous pas vraiment avoir de belles choses? Ne t'en fais pas. Nous croyons que nous pouvons, et peut-être tout n'est pas désespéré. Mais d'abord, permettez-moi de répondre à une question que vous vous posez peut-être.

Pourquoi avons-nous besoin de l'API d'accès aux polices locales lorsqu'il existe des polices Web?

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 programmation 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 les filtres vectoriales o transformaciones en las formas de glifos.
• Les développeurs peuvent avoir des piles de polices héritées pour leurs applications qu'ils apportent sur le Web. Pour utiliser ces piles, elles nécessitent généralement un accès direct aux données de police, ce que les polices Web ne fournissent pas.
• Certaines polices peuvent ne pas être concédées sous licence pour la distribution sur le Web. Par exemple, Linotype a une licence pour certaines polices qui ne comprend que utilisation de bureau.

L'API d'accès à la source locale est une tentative pour résoudre ces problèmes. Il se compose de deux parties:

• ONGLE API d'énumération de polices, qui permet aux utilisateurs d'accorder l'accès à l'ensemble complet des polices système disponibles.
• A partir de chaque résultat d'énumération, la possibilité de demander un niveau bas (orienté octet) Accès au conteneur SFNT qui comprend les données complètes de la source.

État actuel

Comment utiliser l'API d'accès aux polices locales

Activation via chrome: // flags

Pour expérimenter localement avec l'API Local Font Access, activez #font-accès drapeau sur chrome://flags.

Détection des fonctionnalités

Pour vérifier si l'API d'accès aux polices locales est prise en charge, utilisez:

si ('fonts' dans navigateur) {
}

Demander la permission

L'accès aux sources locales d'un utilisateur est bloqué derrière le "polices locales" permission, que vous pouvez demander avec
navigator.permissions.request ().

try {
const statut = attendre navigateur.permissions.request({
patate douce: 'local-fonts',
});
si (statut.Etat !== 'granted') {
throw new Erreur('Permission to access local fonts not granted.');
}
} catch(err) {
si (err.patate douce !== 'TypeError') {
throw err;
}
}

Dénombrement des sources locales

Une fois l'autorisation accordée, vous pouvez, à partir du FontManager interface qui est exposée dans navigator.fonts, appel mettre en doute () pour demander au navigateur les polices installées localement. Il en résulte un itérateur asynchrone que vous pouvez parcourir en boucle dans un
pour attendre ... de

déclaration. Chaque police est représentée par FontMetadata objet avec des propriétés
Familia (par exemple, "Comic Sans MS"), nom et prénom (par exemple, "Comic Sans MS"), Y postscriptName (par exemple, "ComicSansMS").

const fonts = navigateur.fonts.mettre en doute();
try {
pour attendre (const métadonnées of fonts) {
console.Journal(métadonnées.postscriptName);
console.Journal(métadonnées.nom et prénom);
console.Journal(métadonnées.Familia);
}
} catch (err) {
console.Erreur(err.patate douce, err.un message);
}

Accéder aux données SFNT

Plein SFNT
l'accès est disponible via le blob () méthode de FontMetadata objet. SFNT est un format de fichier de police qui peut contenir d'autres polices, telles que PostScript, TrueType, OpenType, Web Open Font Format (WOFF), etc.

const fonts = navigateur.fonts.mettre en doute();
try {
pour attendre (const métadonnées of fonts) {
si (métadonnées.Familia !== 'Comic Sans MS') {
continue;
}
const sfnt = attendre métadonnées.goutte();
const sfntVersion = (new TextDecoder).decode(
attendre sfnt.slice(0, 4).arrayBuffer());
laisser outlineFormat = 'UNKNOWN';
switch (sfntVersion) {
case 'x00x01x00x00':
case 'true':
case 'typ1':
outlineFormat = 'truetype';
break;
case 'OTTO':
outlineFormat = 'cff';
break;
}
console.Journal('Outline format:', outlineFormat);
}
} catch (err) {
console.Erreur(err.patate douce, err.un message);
}

Manifestation

Vous pouvez voir l'API Local Source Access en action dans le
manifestation en dessous de. Assurez-vous également de vérifier
code source. La démo montre un élément personnalisé appelé qui implémente un sélecteur de police local.

Considérations relatives à la confidentialité

Les "polices locales" el permiso parece proporcionar una superficie altamente imprimible. Sin embargo, los navigateurs 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 être 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.

Sécurité et autorisations

L'équipe Chrome a conçu et mis en œuvre l'API Local Font Access en utilisant les principes de base définis dans Contrôlez l'accès aux fonctionnalités puissantes de la plate-forme Web, y compris le contrôle de l'utilisateur, la transparence et l'ergonomie.

Contrôle utilisateur

L'accès aux sources d'un utilisateur est entièrement sous son contrôle et ne sera autorisé que si l'utilisateur "polices locales" autorisation, comme indiqué dans le
enregistrement de permis, Il est accordé.

Transparence

Si un site a obtenu l'accès aux sources locales de l'utilisateur, il sera visible dans le
fiche d'information du site.

Persistance des autorisations

Les "polices locales" l'autorisation sera conservée entre les rechargements de page. Il peut être révoqué par le Informations sur le site drap de lit.

Retour

L'équipe Chrome souhaite connaître vos expériences avec l'API Local Font Access.

Parlez-nous de la conception de l'API

Y a-t-il quelque chose dans l'API qui ne fonctionne pas comme prévu? Ou vous manquez-vous des méthodes ou des propriétés dont vous avez besoin pour mettre en œuvre votre idée? Vous avez une question ou un commentaire sur le modèle de sécurité? Déposer un problème de spécification dans le Dépôt GitHubou ajoutez vos réflexions à un problème existant.

Signaler un problème avec le déploiement

Vous avez trouvé un bogue avec la mise en œuvre de Chrome? Ou la mise en œuvre est-elle différente de la spécification? Signaler un bogue dans new.crbug.com. Assurez-vous d'inclure autant de détails que possible, des instructions simples à reproduire et de saisir Clignoter> Polices dans le Composants (modifier) boîte. Échec fonctionne très bien pour un partage rapide et facile des répétitions.

Afficher la prise en charge de l'API

Vous envisagez d'utiliser l'API Local Font Access? Votre assistance publique aide l'équipe Chrome à hiérarchiser les fonctionnalités et montre aux autres fournisseurs de navigateurs à quel point il est important de les prendre en charge.

Envoyer un tweeter à @Cromodev avec lui #LocalFontAccess hashtag et faites-nous savoir où et comment vous l'utilisez.

Liens utiles

Merci

La spécification de l'API d'accès à la source locale a été modifiée par
Emil A. Eklund,
Alex Russell,
Cloche de Joshuay
Olivier Yiptong. Cet article a été révisé par
Joe medley,
Dominik Röttschesy
Olivier Yiptong. Image de héros de Brett Jordanie au Unsplash.