如何在 Rails 4 中嵌入带有@font-face 的字体？答案

【问题标题】：How can I embed fonts with @font-face in Rails 4?如何在 Rails 4 中嵌入带有@font-face 的字体？
【发布时间】：2013-08-19 08:03:45
【问题描述】：

标题几乎说明了一切......

我尝试添加 /app/assets/fonts/font.woff 并使用 /app/assets/fonts/font.woff 从我的 css 文件中引用它，但它似乎不起作用。

有什么想法吗？

【问题讨论】：

您是刚刚添加了 .woff 文件还是编写了一些代码来引用它？您的问题缺少一些信息...
@JustinD。我尝试通过手动调整路径（如/app/assets/fonts/...）从我的 css 文件中引用这些文件，但它不起作用。似乎 Rails 正在碍事。
stackoverflow.com/questions/7973271/…
@JimLim 那是 Rails 3.1 的。这些是否适用于 4.0？我是 Rails 新手，但我已经遇到了早期 3.x 和 4.0 之间的很多差异。
是的，它会让人感到困惑。关注链接时，请确保您正在查看 Rails 4 指南并阅读 Rails 4 api。 APIDock 在显示跨版本的变化方面做得很好。

标签： ruby-on-rails ruby font-face ruby-on-rails-4

【解决方案1】：

事实证明，@JimLim 提到的资产管道在 Rails 4 中的工作方式略有不同。完整文档 here，但以下是相关摘录：

2 如何使用资产管道

在以前的 Rails 版本中，所有资产位于公共的子目录中，例如图像， javascripts 和样式表。有了资产管道，首选这些资产的位置现在是 app/assets 目录。中的文件此目录由 Sprockets 中间件提供服务。

资产仍然可以放置在公共层次结构中。下的任何资产 public 将由应用程序或网络作为静态文件提供服务器。您应该将 app/assets 用于必须经过一些处理的文件在提供服务之前进行预处理。

在生产环境中，Rails 通过以下方式将这些文件预编译到 public/assets 默认。然后将预编译的副本用作静态资产网络服务器。 app/assets 中的文件永远不会直接在生产。

所以我最终将我的 /fonts 目录移动到 /public 中，并相应地调整了 @font-face 声明中的路径，一切正常。

【讨论】：

【解决方案2】：

您必须告诉 Rails 将您的字体目录包含在资产管道中，如下所示：

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

最后，让 Rails 为您找出正确的路径，这样您就不必弄乱前缀 app、app/assets 等。在您的 css/scss 文件中添加 .erb 扩展名例如 application.css.erb，并使用嵌入式 ruby：

src: url("<%= asset_path('fonts.woff') %>");

(Related question)

【讨论】：

我没有意识到你可以在 CSS 文件中使用 ruby。很酷！
我没玩过这么多，但通常你可以附加文件扩展名来告诉 Rails 使用正确的预处理器。
嗨，吉姆，感谢您的回答。快速的问题，你已经路由的路径 - 我将字体放在 app/assets 文件夹中正确吗？所以它会是 app/assets/fonts？
应该是app/assets/fonts。