html - 在 Ruby on Rails 元素中加载字体需要太多时间

Question

我在一个 Rails 元素中，我正在使用 /assets/fonts 文件夹中的两种字体。

@font-face {
  font-family: FuturaStd-Light;
  src: url("/assets/fonts/FuturaStd-Light.otf");
}

@font-face {
  font-family: HelveticaNeue;
  src: url("/assets/fonts//HelveticaNeue.dfont");
}

字体是非常大的文件(尤其是第二个)并且加载它们需要很长时间。在每一页中，文本都出现在其他所有内容之后。

有没有更好的方法来加载字体？有没有办法缓存它们？有什么想法吗？

Answer 1

@font-face 是一种很棒的技术，但是大字体文件肯定会降低您的网站速度。您可以使用许多技术来解决这个问题:

• 使用像google fonts 这样的字体托管服务或 typekit
• 在 CDN 上托管您的字体文件
• 使用类似 fontsquirrel 的服务优化您的字体文件

要特别注意的一件事是，如果样式表之前有 SCRIPT 元素，IE 将阻止整个页面的呈现。因此，请确保所有样式表链接都位于您正在加载的任何 javascript 文件之上。

进一步阅读:

• Web Font Performance: Weighing @font-face Options and Alternatives
• @font-face and performance
• fighting the FOUT