我使用谷歌字体和我网站的排版。看起来很棒，但它增加了很大的开销。有没有办法在不影响网站速度的情况下仍然可以让我的网站具有相同的外观和感觉？
我在这里分析我的网站https://developers.google.com/speed/pagespeed，当我使用 Google 字体时，我得到的分数非常低，大约 60，但如果我删除这些字体，那么我的分数很高。有没有办法在不影响网页质量的情况下使用这些字体？我的首要任务是页面优化。
问问题
10106 次
2 回答
37
简短的回答：没有。稍微长一点的答案：不，您可以尝试，但您不太可能击败 Google WebFonts 已经为您提供的内容。现在让我们进一步剖析这个问题......
首先，如果添加单个外部资源 (webfont) 会对您的 PageSpeed 分数产生如此负面的影响，那么您必须拥有一个相当轻量级的页面——可以说，我们应该在 PageSpeed 方面解决这个问题。现在，回到网络字体！
零基础：向页面添加任何外部资源都会对页面的整体性能产生负面影响。对于 webfonts，这可能是一个更大的问题，因为 CSS 被认为是一种“关键资源”，它会在字体到达之前一直保持渲染——如果我们跳过这一步，那么用户可能会得到一个“无样式内容的闪烁”（ FOUC），页面使用一种字体呈现，然后在字体到达时重新设置样式。这是一种不和谐的体验——你绝对不想要这个。
第二步：使用网络字体意味着我们必须包含一个外部 CSS 文件——在这种情况下，由 Google 服务器提供服务。这些服务器针对低延迟进行了大量优化，但与此同时，这里并没有什么神奇之处——它仍然需要一些时间！
第 3 步：CSS 文件里面有什么？这是很多人批评 Google WebFonts 的地方。样式表提供url()了对 webfont 文件的引用。为什么不使用 base64 / inline 字体？好吧，Google WebFonts 每天都会在数十亿个页面上呈现，所以我们选择使用 URL 是因为该字体很可能在您的浏览器缓存中。如果您使用冷缓存刷新页面（您应该这样做）以测试第一页加载，那么您将始终获取字体..但这不是我们优化的体验。
此外，为什么不将字体内联到您的页面中呢？好吧，每个平台都有它接受的不同文件格式（woff、eot、ttf 等），Google WebFonts 会根据您当前的平台动态提供最优化的格式。如果您只是下载 WebFont（例如 woff）并将其内联，那么它可能适合您，但不适用于不同平台上的访问者。此外，这些字体背后的压缩一直在改进 - 如果您坚持使用 Google 服务器，您将自动继承这些改进。如果你自己滚动，那么你就被卡住了。
简而言之：如果您想自己推出，请确保优化每个平台的字体，提供基于平台的条件字体，并随着时间的推移跟上压缩改进的步伐。如果你能做到所有这些，那么你可能会比提供的更好。:-)
最后但并非最不重要的。不要害怕使用网络字体。是的，他们增加了额外的时间，但演示文稿也很重要。这是你的电话。如果施加的延迟不可接受，则坚持使用默认字体。但试图击败 Google WebFonts 基础设施/CDN 不太可能让您走得很远。
PS 最后一个提示：确保你真正使用了所有的权重和字体。许多人选择整个家庭（以防万一），最终根本不使用它们，这在某些浏览器上会导致不必要的下载。
于 2012-08-28T04:41:37.777 回答
3
Yes you can.
- download your google web font files
- upload them to font squirrel web generator
- select Expert settings and tick: Base64 CSS.
- when loading the font through base64, you are not waiting for an external http call to finish.
- this will remove the Flash Of Unstyled Content (FOUC)
Reference: https://robert.accettura.com/blog/2009/07/03/optimizing-font-face-for-performance/ and you can look up online many other articles. I've also tried it on my website, and it works.
于 2014-09-16T23:13:16.927 回答