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-]/