时间戳

首页 > 解决方案 > 在 Rails 应用程序中字体加载缓慢。为什么会这样？

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

问题描述

我的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 会发出 get 请求来获取字体？

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

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

标签： ruby-on-rails

解决方案

为什么 rails 会发出 GET 请求来获取字体？

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

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

没有把握。我看到您使用的字体是自定义的。我在https://befonts.com/reckless-font.html上找到了它。为了快速加载，它可以上传到某些 CDN 服务器上，例如 Google 或 CloudFlare，并通过硬链接从那里下载。但它太新了，所以它是否流行到足以让 CDN 专业人士接受它到他们的仓库中是值得怀疑的。

要使字体（和所有静态内容）加载得更快，您可以将静态文件移动到某个 CDN 服务。例如，检查https://www.cloudflare.com/作为选项。

推荐阅读