如何使用Asset Pipeline从非标准目录传递字体

Question

我试图将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 Factor宝石

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

为什么资产没有获得服务

我对这一切感到困惑.为什么不提供这些字体？

Answer 1

这个问题可能是由于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-face重新定义font-path font-url(),此函数由sass-rails提供.预编译后,您将看到您的网址已被重写/assets/font-awesome/fonts/fontawesome-webfont-50b448f878a6489819d7dbc0f7dbfba0.eot?v=4.0.3或类似的内容public/assets/application-xxxxxx.css.

您可以在各种宝石中找到相同的方法,包括资产,例如bootstrap-sass,它是一个非常受欢迎的宝石.阅读此文件:_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.

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