將多個.woff文件合併爲一個

Question

在我管理的網站上，我們有幾個.woff文件，每個字體一個。爲了節省加載時間，我想減少發出的請求數量。是否有可能將這些woff文件合併到一個資源中？

Answer 1

您可以使用base64將woff資產捆綁到您的CSS中。

裏面你的@ font-face聲明：

url('data:application/x-font-woff;base64,myVeryLongBase64StringGoesHere...'); 

這可能會增加資產的文件大小。根據我的經驗，這通常約爲20％ - 與等效的TTF文件大小基本相同。大部分情況可以通過支持gzip的服務器來恢復。權衡是可以接受的，但是YMMV。

正如在嵌入blob時經常推薦的CSS - 將它們全部保存在單獨的樣式表中，引用之後您的基本樣式。否則，客戶端可能正在等待字體加載，然後才能看到您的內容。