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-face 选项和替代方案
• @font-face 和性能
• 与 FOUT 战斗

Answer 2

我同意 Scott 的观点，@font-face 可能会减慢您的网站速度，因此根据您的目标，您可能希望使用 google 字体、typekit 或其他在线字体提供商。对于我目前正在从事的项目，我选择了谷歌字体。您所要做的就是将代码段 google web fonts 添加到您的 applications.html.erb 中：

<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic' rel='stylesheet' type='text/css'> 

然后将其添加到您的 css 文件中：

h1 {
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
}