自定义字体（通过资产管道）没有出现在带有 Rails 5.2 的 Heroku 上答案

【问题标题】：Custom Font (via Asset Pipeline) not Appearing on Heroku with Rails 5.2自定义字体（通过资产管道）没有出现在带有 Rails 5.2 的 Heroku 上
【发布时间】：2019-04-03 18:39:52
【问题描述】：

我正在尝试让Playlist font 在我的 Rails 应用程序上工作。它显示在本地主机上，但不在 Heroku 上。

我在我的assets 文件夹中添加了一个fonts 文件夹，将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 中添加了一个谷歌字体备份选项以避免草书默认值。它仍然没有显示正确的字体，但至少它不会在页面加载时因为丑陋而让你眼花缭乱：

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

【问题讨论】：

你在用git吗？我假设 heroku 是这样，所以从 Rails 根目录运行git ls-files --error-unmatch app/assets/fonts/PlaylistCaps.otf。只是想确保它已被添加到您的 git 存储库中。
@NathanKontny 它回来了app/assets/fonts/PlaylistCaps.otf。

标签： ruby-on-rails heroku

【解决方案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 如果您现在看到它将下载该字体。

【讨论】：

为了将来参考，这只适用于样式表文件夹中的字体和 src 中的src: asset-url("PlaylistCaps.otf") format("opentype");。

【解决方案2】：

我以前从未使用过离线字体，但我刚刚尝试过，效果很好：

删除文件夹路径，使用asset-url代替url：

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

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

希望对您有所帮助。

【讨论】：