优化（减少）网络字体请求

我的主页当前使用5种网络字体-由于对Helvetica Neue的支持不一，我希望它是6种。字体之一是“ FontAwesome”图标，其他四种仅用于一个或两个单词（即，我的标题是“ Optimization”，用看起来像旧计算机的字母写）。

这些字体中有2种可以通过Google获得，我只要求提供所需的字母（效果很好）。但是，其他2个来自openfontlibrary.org，并且仅以单一格式提供。没什么大不了的（无论如何，我都会安全地需要它们，这样本地副本会更好），带有Fontsquirrel.com @ font-face生成器的快捷工具，并且我有多种格式，可以引导CSS。

然后我测试页面加载时间...呃。我认为我可以将本地副本归为一个子集，有人在这方面有经验吗？

与仅使用标准的Web安全系统字体相比，使用非标准的Web字体对页面加载时间有显着的性能影响。无论您使用的是JavaScript还是@ font-face，都是这种情况。

人们应始终仔细分析是否应使用非标准的网络字体。

在考虑使用非标准Web字体时需要问自己的一些问题：

• 您是否仅使用它们来表明您可以并且知道如何做？
• 它是否旨在执行更好的设计并提供更好的用户体验？
• 用于实现跨浏览器字体的方法是否兼容？
• 一张图像就足够了，尤其是在一张纸上只有几个字或只有几页的情况下？
• 字体与网络安全字体是否足够不同，以使其值得使用？
• 如果该字体用作正文，是否易于阅读，或者该字体是为标题设计的？

确保您至少了解排版的基础知识以及排版如何影响您的设计，并充分利用其优势。

其他4个仅用于一个或两个单词

那是字面意思吗？
如果是这样，您为什么不介意完全嵌入这些字体（子集与否）？在这种情况下，您甚至不应该进行优化，只需删除即可。使用所需的文本制作图像并使用您喜欢的文本替换技术。只需几句话，您就可以添加HTTP请求并下载时间到您的站点。

为了跟进，我最终使用@ font-face生成器的高级选项来划分我的字体，所以我只加载了所需的字符。

选项之一是对字体进行Base64编码（这使我可以将它们嵌入CSS文件中）。如果提供内存，Base64将对.woff和.ttf字体进行编码。

虽然我希望支持尽可能多的浏览器用户，但我认为通过额外的，可能是冗余的数据来减慢现代浏览器的用户的速度是不值得的，因此我使用了Modernizr（使用yep / nope.js）CSS按照强化的防弹字体语法，异步加载引用所有字体格式的独立文件。

我去来回的Base64编码之间的.woff字体和包括字体声明的其余部分在主CSS文件或仅包括Base64编码.woff在初级CSS，然后包括在其他格式CSS文件，该文件通过我异步加载Modernizr.load。

我喜欢快速加载而不是美观，因此FOUC并不是什么大问题，但是我会注意到大多数浏览器在加载时（在加载了Base64编码字体之后CSS）异步地对字体进行了“闪烁” 。

从好的方面来说，一旦字体被加载并存储在缓存中（服务器上设置的长期过期标头），便消除了“闪烁”，并且我能够加载扩展的字体集，以便使用其他语言的用户（并使用随附的Google翻译小部件）仍会看到样式化的文本。

由于这是我自己的网站，因此我可以进行试验，但是我主要是为了“炫耀”它，因此我对客户网站比较保守。

我实现的另一种技术是将所有.svg字体放到一个文件中，并用自己的ID标识每个字体，而不是像@ font-face生成器生成的那样将每个字体保存在单独的文件中。