时间戳

首页 > 解决方案 > 自定义字体（通过资产管道）没有出现在带有 Rails 5.2 的 Heroku 上

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

问题描述

我正在尝试让播放列表字体在我的 Rails 应用程序上工作。它显示在本地主机上，但不在 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），但找不到可行的解决方案。

如果您想四处逛逛，现场网站就在这里。

更新

我在我的中添加了一个谷歌字体备份选项scss以避免草书默认值。它仍然没有显示正确的字体，但至少它不会在页面加载时因为丑陋而使你眼花缭乱：

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

标签： ruby-on-railsheroku

解决方案

您应该在 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

当你这样做时，应该生成正确的资产路径。例如，您将获得这样的“指纹”网址：https : //www.thestaysanemom.com/assets/PlaylistScript-4a2ebf308b737499dcd1eef2a5cb0edf756089ea4eca0b811034ab41c4dbca8f.otf 如果您现在看到将下载该字体。

推荐阅读