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

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');