将多个.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('data:font/woff2;base64,myVeryLongBase64StringGoesHere...'),
url('/fonts/myFont.woff') format('woff');