GoogleWebFonts FontFamilyPreviewImages

Fontes Web Google - Images d'aperçu de la famille des polices

Ce repo contient des images qui sont des représentations de toutes les différentes polices Google. Nous en avions besoin pour notre pochoir d'application, car nous permettons à nos utilisateurs de rechercher dans Google Fonts (via leur API). Mais nous voulions (évidemment), nous avions besoin de leur fournir un aperçu de ce à quoi ressemblait la police.

Nous aurions pu charger les polices en mémoire et ensuite les montrer, mais cela ne semblait pas idéal.

Note

Si vous êtes intéressé par une version hébergée de la capture d'écran que vous voyez ci-dessous (permettant à vos utilisateurs de déclencher un modal, et un clic de bouton bouillonnant un événement qui contient l'URL du fichier woff2 correspondant), veuillez me faire savoir: [email protected]

Capture d'écran de la façon dont notre application utilise les images dans ce dépôt:

Pourquoi y a-t-il autant de fichiers?

Bien que les polices Google fournissent actuellement des milliers de variations de polices différentes, il existe de nombreuses images réelles. En effet, Google Fonts met régulièrement à jour les polices d'une version à une autre (par exemple v5 à v6). Nous renforçons ensuite les images pour nous assurer que l'aperçu que nous montrons à nos utilisateurs est exact.

J'ai décidé de laisser ces fichiers dans le dépôt pour la postérité: vous ne savez jamais ce dont les gens auront besoin :)

Tailles

À l'heure actuelle, je ne fournis que des images d'aperçu qui ont une valeur font-size de 48px . La largeur respecte la largeur native de la police. Pour assurer un affichage net, je vous suggère de cocoter le pouce d'aperçu à une hauteur maximale de 24px .

Nommer la convention des fichiers:

Deux exemples: ABeeZee-400.v10.png et Cabin-400italic.v10.png
Le format est assez simple:

• Le nom de la police (les caractères non hyphens, non alphabétiques et non nucères sont supprimés)
• Un tableau de bord ( - )
• Le poids de police
• Si la police est une version en italique, après la police, le mot italic est ajouté
• Le numéro de version, précédé par la lettre v

L'expression régulière que j'utilise pour éliminer les personnages de noms est: /[^A-Za-z0-9-]/