Question

我正在尝试让Playlist font在我的Rails应用程序上工作。它显示在localhost上，而不显示在Heroku上。

我在fonts文件夹中添加了assets文件夹，并将PlaylistCaps.otf和PlaylistScript.otf文件放入其中，并将此行添加到我的config/application.rb中：

config.assets.paths << Rails.root.join("app","assets","fonts")

我的application.scss文件中有这个文件：

@font-face {
  font-family: "PlaylistScript";
  src: url(/assets/fonts/PlaylistScript.otf) format("opentype");
}

@font-face {
  font-family: "PlaylistCaps";
  src: url(/assets/fonts/PlaylistCaps.otf) format("opentype");
}

我也尝试过将源文件放在S3上，并将其链接到src: url()中，但无济于事...

我检查以确保Heroku在部署时对我的资产进行了预编译（我没有单独进行此操作）。

有人可以帮我解决这个问题吗？我的实时站点当前正在显示糟糕的样例草书。我咨询了许多SO帖子（here，here，here）和一些要点（例如this），但找不到可行的解决方案。

如果您想四处浏览，实时站点为here。

更新

我在scss中添加了Google字体备份选项，以避免草书默认设置。它仍然没有显示正确的字体，但至少它不会在页面加载时使您的眼睛难看：

$font-script: 'PlaylistScript', 'Arizonia', cursive;

Answer 1

您应该在Rails sass文件中使用资产路径。

所以代替：

src: url(/assets/fonts/PlaylistCaps.otf) format("opentype");

要做：

src: asset-path(PlaylistCaps) format("opentype");

这里有一些文档：https://guides.rubyonrails.org/asset_pipeline.html#css-and-sass

执行此操作时，应生成正确的资产路径。例如，您将获得如下的“指纹” URL：https://www.thestaysanemom.com/assets/PlaylistScript-4a2ebf308b737499dcd1eef2a5cb0edf756089ea4eca0b811034ab41c4dbca8f.otf（如果看到的话）现在将下载该字体。

Answer 2

我以前从未使用过脱机字体，但是我刚刚尝试过，并且可以使用：

删除文件夹路径，并使用asset-url而不是url：

@font-face {
  font-family: 'PlaylistScript';
  src: asset-url('PlaylistScript.otf');
}

@font-face {
  font-family: 'PlaylistCaps';
  src: asset-url('PlaylistCaps.otf');
}

希望有帮助。

自定义字体（通过资源管道）未显示在带有Rails 5.2的Heroku上

2 个答案:

删除文件夹路径，并使用asset-url而不是url：