Utilisez une typographie avancée avec des polices locales

Découvrez comment l'API Local Font Access vous permet d'accéder et d'obtenir des détails de bas niveau sur les polices installées localement de l'utilisateur.

24 août 2020

Polices sécurisées pour le Web

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 qui a fourni ces polices en téléchargement gratuit dans le but 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-serif ;
 }

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

bloc au début du CSS, qui spécifie le ou les fichiers de police à télécharger:

@ 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 fonction est qu'il peut être abusé pour la prise d'empreintes digitales du navigateur. Il s'avère que la liste des polices installées par un utilisateur peut être assez identifiable. De nombreuses entreprises ont leurs propres polices d'entreprise qui sont installées sur les ordinateurs portables des employés. Par exemple, Google a une police d'entreprise appelée 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?

Historiquement, les graphiques et les outils de conception de qualité professionnelle ont été difficiles à proposer sur le Web. Un obstacle a été l'incapacité d'accéder et d'utiliser la gamme complète de polices suggérées et construites par des professionnels que les concepteurs ont installées localement. Les polices Web permettent certains cas d'utilisation de publication, mais n'autorisent pas l'accès par programme aux formes de glyphes vectoriels et aux tables de polices utilisées par les rastérisateurs pour rendre les contours de glyphes. De plus, il n'existe aucun moyen d'accéder aux données binaires à partir d'une source Web.

• Les outils de conception doivent accéder aux octets de police pour effectuer leur propre implémentation de conception OpenType et permettre aux outils de conception de se connecter à des niveaux inférieurs, pour des actions telles que l'exécution de filtres vectoriels ou de transformations sur des formes de glyphes.
• 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:

if ( 'fonts' dans le 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 ().

essayez {
 état de const = attendre le navigateur . autorisations . demande ( {
 nom : 'local-fonts' ,
 } ) ;
 if ( état . état ! == 'accordé' ) {
 throw new Error ( 'La permission d'accéder aux polices locales n'est pas accordée.' ) ;
 }
 } catch ( err ) {
 if ( err . nom ! == 'TypeError' ) {
 jeter 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 . polices . requête ( ) ;
 essayez {
 for wait ( métadonnées const des polices ) {
 console . log ( métadonnées . postscriptName ) ;
 console . log ( métadonnées . fullName ) ;
 console . log ( métadonnées . famille ) ;
 }
 } catch ( err ) {
 console . erreur (. err nom, err 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 . polices . requête ( ) ;
 essayez {
 for wait ( métadonnées const des polices ) {
 if ( metadata . family ! == 'Comic Sans MS' ) {
 continuer ;
 }
 const sfnt = attendre les métadonnées . blob ( ) ;
 const sfntVersion = ( nouveau TextDecoder ) . Décoder (
 attendre sfnt . tranche ( 0 , 4 ) . arrayBuffer ( ) ) ;
 let contourFormat = 'INCONNU' ;
 commutateur ( sfntVersion ) {
 cas 'x00x01x00x00' :
 cas 'vrai' :
 cas 'typ1' :
 contourFormat = 'vrai type' ;
 pause ;
 cas 'OTTO' :
 contourFormat = 'cff' ;
 pause ;
 }
 console . log ( 'Format du plan:' , outlineFormat ) ;
 }
 } catch ( err ) {
 console . erreur (. err nom, err 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" le permis semble offrir une surface hautement imprimable. Cependant, les navigateurs peuvent renvoyer ce qu'ils veulent. Par exemple, les navigateurs axés sur l'anonymat peuvent choisir de ne fournir qu'un ensemble de polices par défaut intégrées au navigateur. De même, les navigateurs ne sont pas obligés de fournir des données de table exactement telles qu'elles apparaissent sur le disque.

Dans la mesure du possible, l'API d'accès à la source locale est conçue pour exposer exactement les informations nécessaires pour activer les cas d'utilisation mentionnés. Les API système peuvent produire une liste des polices installées non pas dans un ordre aléatoire ou ordonné, mais dans l'ordre d'installation des polices. Le renvoi exact de la liste des polices installées fournie par ladite API système peut exposer des données supplémentaires pouvant être utilisées pour la prise d'empreintes digitales, et les cas d'utilisation que nous voulons activer ne sont pas pris en charge en conservant cet ordre. Par conséquent, cette API nécessite que les données renvoyées soient triées avant d'être renvoyées.

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.

Envoyez un tweet à @Cromodev avec lui #LocalFontAccess hashtag et indiquez-nous 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.