字体在Rails应用程序中加载缓慢。为什么会这样呢？

Question

我在app/assets/fonts文件夹中有一个自定义字体，但是在生产中，该字体正在缓慢加载，从而在字体呈现之前将按钮留空：

然后3秒钟后，此：

这是怎么回事？我该怎么办？

我的CSS看起来像这样：

@font-face {
  font-family: 'Reckless-Medium';
  src: font-url('Reckless-Medium.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

$reckless-medium: 'Reckless-Medium';

这：

.btn {
    display: inline-block;
    font-size: 15px;
    font-family: $reckless-medium;

为什么Rails会请求获取字体？

Started GET "/assets/Reckless-Medium.otf" for 127.0.0.1 at 2018-10-19 00:53:29 -0400

字体位于另一台服务器上吗？

Answer 1

  

为什么Rails会发出GET请求以获取字体？

因为您告诉我们这样做了。 font-url('Reckless-Medium.otf')最终命令客户端的浏览器从您的Web服务器下载字体。

  

字体位于另一台服务器上吗？

不确定。如我所见，您使用的字体是自定义的。我在https://befonts.com/reckless-font.html上找到了它。为了快速加载，可以将其上传到某些CDN服务器（例如Google或CloudFlare）上，并进行硬链接以从那里下载。但是它太新了，因此值得怀疑的是，CDN专业人士是否接受这种字体是否足够流行。

要使字体（和所有静态内容）更快地加载，可以将静态文件移至某些CDN服务。例如，选中https://www.cloudflare.com/作为选项。