6

我正在尝试将 Fontawesome 包含在 Rails 4 应用程序中，但是这些资产并未进入资产管道。但是，字体并没有在生产中出现，我不知道为什么。

文件结构组织

我所有的资产都存储在其中，/assets/components 以便 Fontawesome 出现在：（/assets/components/font-awesome它们位于不同的目录中，因为我使用的是 Bower）。

CSS清单文件：

# application.css.scss
/* ...
*= require bootstrap/dist/css/bootstrap
*= require font-awesome/css/font-awesome
*= require_self
*= require_tree .
*/

资产管道设置为预编译字体

# Version of your assets, change this if you want to expire all your assets
config.assets.version = '1.0'
config.assets.paths << Rails.root.join('vendor', 'assets', 'components')

# Adding Webfonts to the Asset Pipeline
config.assets.precompile << Proc.new { |path|
  if path =~ /\.(eot|svg|ttf|woff|otf)\z/
    true
  end
}

我添加了预编译指令，以便根据这个问题对字体进行预编译

包括 Heroku 12 因子宝石

#gemfile
group :production do
  gem "rails_12factor"
end

所以有什么问题？

当我推送到 Heroku 时，它显示应用程序正在请求文件但它们没有加载：

在此处输入图像描述

在此处输入图像描述

看看日志，这似乎是一个路由问题——我原以为可以提供字体，/assets/fonts但它显然是在寻找/fonts

   app[web.1]: Started GET "/fonts/fontawesome-webfont.ttf?v=4.0.1" for 86.161.231.181 at 2013-10-29 15:53:01 +0000
   app[web.1]: Started GET "/fonts/fontawesome-webfont.ttf?v=4.0.1" for 86.161.231.181 at 2013-10-29 15:53:01 +0000
   app[web.1]: 
   app[web.1]: ActionController::RoutingError (No route matches [GET] "/fonts/fontawesome-webfont.ttf"):

为什么资产没有得到服务

我对这一切有点困惑。为什么不提供这些字体？

4

1 回答 1

16

这个问题可能是由于 Rails 资产无法url()在 CSS 文件中预编译函数的原因造成的。

因为您的字体文件是由资产预编译的，所有指向这些文件的 url 都必须重写为 MD5 消化的文件名。不幸的是，Rails 不能url()自动预编译，至少我是这么认为的，因为我测试了一些案例并得出了这个结论：) 在 Rails 指南中，Rails 使用 ERB 和 Sass 提供了这些功能。看这里。

我认为有两种方法可以解决您的问题。

首先，将目录设置.bowerrc为public/components并手动使用它们，不需要在资产中使用它们。

第二个，我建议使用font-url()而不是url()在 Font-Awesome 中，所以你application.css.scss会看起来像：

   /* ...
    *= require bootstrap/dist/css/bootstrap
    *= require font-awesome/css/font-awesome
    *= require_self
    *= require_tree .
    */    

    @font-face {
      font-family: 'FontAwesome';
      src: font-url('font-awesome/fonts/fontawesome-webfont.eot?v=4.0.3');
      src: font-url('font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),
      font-url('font-awesome/fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'),
      font-url('font-awesome/fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'),
      font-url('font-awesome/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
      font-weight: normal;
      font-style: normal;
    }

用你的实际字体路径和字体重新定义字体路径font-url()，这个功能由 sass-rails 提供。预编译后，您会看到您的 url 已被重写为/assets/font-awesome/fonts/fontawesome-webfont-50b448f878a6489819d7dbc0f7dbfba0.eot?v=4.0.3或类似 in 的内容public/assets/application-xxxxxx.css。

您可以在各种包含资产的 gem 中找到相同的方法，例如 bootstrap-sass，它是一个非常受欢迎的 gem。阅读此文件：_glyphicons.scss。你会看见：

@font-face {
  font-family: 'Glyphicons Halflings';
  src: font-url('#{$icon-font-path}#{$icon-font-name}.eot');
  src: font-url('#{$icon-font-path}#{$icon-font-name}.eot?#iefix') format('embedded-opentype'),
       font-url('#{$icon-font-path}#{$icon-font-name}.woff') format('woff'),
       font-url('#{$icon-font-path}#{$icon-font-name}.ttf') format('truetype'),
       font-url('#{$icon-font-path}#{$icon-font-name}.svg#glyphicons_halflingsregular') format('svg');
}

url()已被替换。所以我认为重写@font-face是application.css.scss最简单的方法:)

顺便说一句，bootstrap 和 font-awesome 都有@font-face. 我不知道 font-awesome 是否必要。

当您访问该页面时，它会显示正确的日志。因此，您无需更改 bower 存储库中的任何代码。希望能帮助到你。

于 2013-11-08T15:14:54.157 回答