GoogleWebFonts FontFamilyPreviewImages

Google Web字体 - 字体家庭预览图像

该回购包含的图像是所有不同Google字体的表示。我们需要为我们的应用模具提供此功能，因为我们允许用户通过Google字体（通过其API）进行搜索。但是我们（显然）想要/需要为他们提供字体外观的预览。

我们本可以将字体加载到内存中，然后将其显示为这些，但这似乎并不理想。

笔记

如果您对下面看到的屏幕截图的托管版本感兴趣（允许用户触发模态，并且按钮单击燃烧一个包含相应woff2文件的URL的事件），请让我知道：[email protected]

我们的应用如何使用此存储库中的图像的屏幕截图：

为什么有这么多文件？

虽然Google字体当前提供了数千种不同的字体变体，但仍有许多实际图像。这是因为Google字体通常将字体从一个版本更新为另一个版本（例如V5至V6）。然后，我们重新渲染图像，以确保我们显示用户准确的预览。

我决定将这些文件留在存储库中，以确保后代：您永远不知道人们需要什么:)

尺寸

目前，我仅提供具有48px font-size值的预览图像。宽度尊重字体的天然宽度。为了确保显示出锐利的显示，我建议您以最大24px的高度进行硬码预览拇指。

命名文件约定：

两个示例： ABeeZee-400.v10.png and Cabin-400italic.v10.png
格式非常直接：

• 字体名称（删除非hyphens，非字母和非数字字符）
• 破折号（ - ）
• 字体重量
• 如果字体是斜体版本，则在字体之后，添加了italic字
• 版本编号之前是字母v

我用来剥离名称字符的正则表达式是： /[^A-Za-z0-9-]/