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

【问题标题】：Combine multiple .woff files into one将多个 .woff 文件合并为一个
【发布时间】：2012-10-19 13:10:09
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

在你的@font-face 声明中：

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

这可能会增加资产的文件大小。根据我的经验，这通常会增加 20% 左右 - 与等效的 TTF 文件大小大致相同。其中大部分可以通过支持 gzip 的服务器恢复。折衷对我来说是可以接受的，但是 YMMV。

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

【讨论】：

【解决方案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');

【讨论】：