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

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

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

在@font-face声明中：

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

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

---

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

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

url（'data:application/font-woff；base64，myverylongbase64stringgoesher…'）

url（'data:font/woff2；base64，myverylongbase64stringgoesher…）

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

$base64 myfont.ttf>fontbase64.txt

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

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

使用rel=“preload”并将它们放在主CSS之前，以便尽快预加载它们，并为第一页呈现做好准备。