heroku - 如何使用 Asset Pipeline 从非标准目录传送字体

Question

我正在尝试将 Fontawesome 包含在 Rails 4 应用程序中，但 Assets 并未进入 Assets 管道。然而，这些字体并没有在生产中使用，我不明白为什么。

文件结构组织

我的所有 Assets 都存储在/assets/components中这样 Fontawesome 就会出现在:/assets/components/font-awesome (它们位于不同的目录中，因为我使用的是 Bower)。

CSS list 文件:

# 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
}

我添加了预编译指令，以便字体全部被预编译 as per this question

包含 Heroku 12 Factor gem

#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"):

为什么 Assets 没有得到服务

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

Answer 1

此问题可能是Rails资源无法预编译导致的url() CSS 文件中的函数。

由于您的字体文件是由资源预编译的，因此所有指向这些文件的 url 都必须重写为 MD5 摘要的文件名。不幸的是 Rails 无法预编译 url()自动，至少我这么认为，因为我测试了一些案例并得到了这个结论:) 在 Rails 指南中，Rails 使用 ERB 和 Sass 提供了这些功能。请参阅here .

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

第一，设置目录在.bowerrc至public/components并手动使用它们，不需要在您的 Assets 中使用它们。

第二个，我建议使用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或类似public/assets/application-xxxxxx.css中的内容.

您可以在各种 gem 中找到相同的方法，其中包括 Assets ，例如 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 存储库中的任何代码。希望对您有所帮助。