Rails 4：为啥在生产中没有加载字体？

Posted 2023-03-06

【中文标题】Rails 4：为啥在生产中没有加载字体？

【英文标题】：Rails 4: Why are fonts not loading in production?Rails 4：为什么在生产中没有加载字体？

【发布时间】：2013-10-24 22:22:48

【问题描述】：

我无法在生产中的 Rails 4 应用程序中加载字体，它在开发中正常工作。

部署时在服务器上预编译资产。

我有我的字体

app/assets/fonts

我的 app.css：

@font-face 
    font-family: 'WalkwayBoldRegular';
    src: url('Walkway_Bold-webfont.eot');
    src: url('Walkway_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Walkway_Bold-webfont.woff') format('woff'),
         url('Walkway_Bold-webfont.ttf') format('truetype'),
         url('Walkway_Bold-webfont.svg#WalkwayBoldRegular') format('svg');
    font-weight: normal;
    font-style: normal;

在我的 production.rb 我有：

config.assets.precompile << Proc.new  |path|
  if path =~ /\.(eot|svg|ttf|woff)\z/
    true
  end

【问题讨论】：

你在使用 Heroku 吗？

ubuntu 12.04，不是heroku

好的，我有一个答案，但我们只在 Heroku 中使用过它，所以如果它不正确，请多多包涵

【参考方案1】：

上周我们遇到了这个问题 - 问题是您的资产将被编译为具有 MD5 哈希值，而您的标准 CSS 仍将寻找它们的“标准”名称。这是图像和字体的问题。

@font-face 
    font-family: 'akagi';
    src: asset_url('fonts/akagi-th-webfont.eot');
    src: asset_url('fonts/akagi-th-webfont.eot?#iefix') format('embedded-opentype'),
         asset_url('fonts/akagi-th-webfont.woff') format('woff'),
         asset_url('fonts/akagi-th-webfont.ttf') format('truetype'),
         asset_url('fonts/akagi-th-webfont.svg#akagithin') format('svg');
    font-weight: 300;
    font-style: normal;

这是一个如何使用scss 文件动态加载资产的示例。这些文件被编译（在推送之前或在初始化期间）到您的 .css 文件中，所有文件都正确同步了它们的资产。

我们在使用 Heroku 时遇到了类似的问题，并设法通过将我们的文件放入 /stylesheets/layout/fonts.css.scss 然后调用来使其正常工作

@import '/layout/fonts';

我们还调用了 application.css -> application.css.scss 来支持@import 函数

【讨论】：

又来救我了！我真的在为此苦苦挣扎，其他答案似乎都不起作用。我认为这里最重要的一点是添加@import '/layout/fonts';。谢谢！

没问题！很高兴它有帮助:)

在我的情况下，我在 application.css 本身中有 @font-face，我的字体文件在 /assets/fonts 文件夹中。那么网址会保持不变吗？

这取决于字体文件的存储位置。我们在 /fonts/ 文件夹中 - 如果您的不同，它将是相对于 stylesheets 路径的不同路径

这篇文章可能对某些人有用：reinteractive.net/posts/…

【参考方案2】：

以下是针对任何库解决此问题的通用方法。

在本地重现错误

在生产环境中运行 rails 服务器

在终端rake assets:precompile

这个config/environments/production.rb

  # Rails 4 production
  # config.serve_static_files = true
  # Rails 5, Uncomment to run production on local
  # config.log_level = :debug
  config.public_file_server.enabled = true

在终端RAILS_ENV=production rails s
您应该会在网络浏览器上看到错误

覆盖字体系列

application.css 需要重命名为 application.scss，因为将使用 asset-url

在文件config/initializers/assets.rb上添加要预编译的字体：

Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

在 CSS 库中查找字体定义并将其复制到 application.scss。它应该是这样的：

@font-face 
  font-family: 'my-library';
  src: url('../fonts/my-library.eot');
  src:
    url('../fonts/my-library.eot?#iefix') format('embedded-opentype'),
    url('../fonts/my-library.woff2') format('woff2'),
    url('../fonts/my-library.ttf') format('truetype'),
    url('../fonts/my-library.woff') format('woff'),
    url('../fonts/my-library.svg?#my-library') format('svg');
  font-weight: normal;
  font-style: normal;

改为：

@font-face 
  font-family: 'my-library';
  src: asset-url('my-library/fonts/my-library.eot');
  src:
    asset-url('my-library/fonts/my-library.eot?#iefix') format('embedded-opentype'),
    asset-url('my-library/fonts/my-library.woff2') format('woff2'),
    asset-url('my-library/fonts/my-library.ttf') format('truetype'),
    asset-url('my-library/fonts/my-library.woff') format('woff'),
    asset-url('my-library/fonts/my-library.svg?#my-library') format('svg');
  font-weight: normal;
  font-style: normal;

做了哪些改变

使用asset-url 而不是url 将../fonts 或类似路径更改为asset-url 可以理解的路径。

assets-url 放什么路径

要知道asset-url 理解哪个路径，请转到rails 控制台并输入Rails.application.assets.paths。你会得到类似的东西：

[
  '/path/1',
  '/path/2',
  '/path/3',
]

如果您的字体在 /path/2/my-library/fonts/ 上，则使用 asset-url('my-library/fonts/my-library.eot').

即您删除了在Rails.application.assets.paths 上找到的那部分路径。

检查你写的路径是否正确

在 Rails 控制台上进行开发：

helper.asset_url('my-library/fonts/my-library.eot')

应该返回：

"/assets/my-library/fonts/my-library-2517b97e2c0e1e6c8ceb9dd007015f897926bc504154137281eec4c1a9f9bdc9.eot"

注意结尾的/assets/ 和最后一部分的摘要。

【讨论】：

很好的建议，谢谢。在我的情况下，将字体放入app/assets/fonts/，然后只引用没有目录的字体文件名src: font-url('fontname.eot') 效果更好，但控制台上的helper 是一个不错的技巧。

@speedracr。它应该是 src: font_url('fontname.eot')。同样在 Rails 控制台中，您可以使用 helper.font_url('fontname.eot')。

【参考方案3】：

1:- 将所有字体保存在 app/assets/fonts 文件夹中。

2:- 在 rake assets:precompile RAILS_ENV=production 之后，您的所有字体都将被预编译到 public/assets 文件夹并带有摘要。

3:- 在 scss 文件中不要使用 src: url('fontname.eot') 使用 src: font_url('fontname.eot')。

【参考方案4】：

Rails 为此提供了一个预构建助手。您需要使用asset-url() 而不是使用url()。

【参考方案5】：

适用于 Rails >= 5 && 链轮 >= 4：

src: url('Walkway_Bold-webfont.eot');

仅在开发中工作，因为在开发中 rails 直接为所有 app/assets 文件夹提供服务，无需预编译（但不是在生产中，这就是 rails 找不到字体的原因），因此您可以访问在 app/assets 文件夹中，只有 url url。

在生产中，您需要这些文件的预编译版本。 Rails 将这些文件预编译为public/assets。要访问这些文件，您需要 使用 sprockets 助手：font-url 或更通用的助手 asset-url。

src: font-url('Walkway_Bold-webfont.eot');

另外，app/assets下的所有文件夹都会被自动预编译，你不需要将fonts文件夹添加到sprockets搜索路径中。

您可以在 Rails 控制台中使用：Rails.application.config.assets.paths 检查搜索路径。