将多个.woff文件合并为一个 [英] Combine multiple .woff files into one

问题描述

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

On a website I manage we have several .woff files, one for each font. In the interest to save loading time I want to reduce the number of requests made. Is it possible to combine these woff files into one resource?

推荐答案

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

You can bundle the woff assets into your CSS with base64.

在@ font-face声明中:

Inside your @font-face declaration:

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

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

This may increase the asset's file size. In my experience this is usually by around 20% - roughly the same size as the equivalent TTF file. Much of this may be recovered with a gzip-capable server. The tradeoff is acceptable for me, but YMMV.

在将blob嵌入CSS时通常建议-将它们全部放在单独的样式表中，并在基本样式的之后引用.否则，客户端可能会等待字体加载，然后才能按预期看到您的内容.

As is often recommended when embedding blobs in CSS - keep them all in a separate stylesheet, cited after your base style. Otherwise, the client may be waiting for the fonts to load before they see your content as intended.

这篇关于将多个.woff文件合并为一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！