web - 将多个 .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 时经常建议的那样 - 将它们全部保存在单独的样式表中，在基本样式之后引用。否则，客户端可能会等待字体加载，然后才能按预期看到您的内容。