将多个.woff文件合并为一个

Question

在我管理的网站上,我们有几个.woff文件,每个字体一个.为了节省加载时间,我想减少发出的请求数量.是否可以将这些woff文件合并到一个资源中？

Answer 1

您可以使用base64将woff资产捆绑到CSS中.

在@ font-face声明中:

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

这可能会增加资产的文件大小.根据我的经验,这通常是大约20% - 大致与等效的TTF文件大小相同.其中大部分都可以通过支持gzip的服务器来恢复.我可以接受这种权衡,但是YMMV.

正如在CSS中嵌入blob时经常建议的那样 - 将它们全部保存在一个单独的样式表中,以您的基本样式引用.否则,客户端可能正在等待字体加载,然后才能按预期看到您的内容.

Answer 2

我没有评论的声誉，但要更新 @thumphries 答案，您现在可以对 WOFF 和 WOFF2 使用以下内容：

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

url('data:font/woff2;base64,myVeryLongBase64StringGoesHere...');

作为参考，在 UNIX 上，您可以使用内置base64命令直接生成 Base64 字符串，如下所示：

$ base64 myfont.ttf > fontbase64.txt

我觉得这更好，因为延迟是移动用户最大的问题，并且我为不支持 WOFF2 的浏览器（不到 8% 的用户）添加了一个 url 回退，以避免增加网站的总大小。就像这样：

url('data:font/woff2;base64,myVeryLongBase64StringGoesHere...'),
url('/fonts/myFont.woff') format('woff');