Question

问题可能听起来很愚蠢，但有没有办法将woff文件（以及ttf文件）捆绑到1个文件中？就像我们可以使用像grunt-concat，webmake等工具一样使用JS。

Answer 1

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

在@ font-face声明中：

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

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

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