如何使用Asset Pipeline从非标准目录传送字体 [英] How to deliver fonts from a non-standard directory using Asset Pipeline

问题描述

我试图在Rails 4应用中包含Fontawesome，但是这些资产并没有进入资产管道。但是，字体并没有在制作中出现，我无法弄清楚为什么。

文件结构组织

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

CSS清单文件：

 ＃application.css .scss 
 / * ... 
 * =需要bootstrap / dist / css / bootstrap 
 * =需要font-awesome / css / font-awesome 
 * = require_self 
 * = require_tree。 
 * / 
  

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

 ＃您的资产版本，如果您想过期所有资产，请更改此值
 config.assets.version ='1.0'
 config .assets.paths<< Rails.root.join（'vendor'，'assets'，'components'）
 
＃将Web字体添加到资产管道
 config.assets.precompile<< Proc.new {| path | 
 if path =〜/\.(eot|svg|ttf|woff|otf)\z/ 
 true 
 end 
} 
  

我添加了预编译指令，这样所有的字体都将被预编译。

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

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

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

  / * ... 
 * = require bootstrap / dist / css / bootstrap 
 * =需要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'）格式（'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 = ''格式（'truetype'），
 font-url（'font-awesome / fonts / fontawesome-webfont.svg？v = 4.0.3＃fontawesomeregular'）format（'svg'）; 
 font-weight：normal; 
 font-style：normal; 
 
 
 
 $ b 
使用实际的字体路径和font-face重新定义字体路径， code> font-url（），这个函数是由sass-rails提供的。预编译后，你会看到你的url已被重写为 /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'），
字体-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'）格式（'svg'）; 
 
  
  url（）已被替换。所以我认为在 application.css.scss 中重写 @ font-face 是最简单的方法:) 
 
 
 
顺便说一句，bootstrap和font-awesome都有 @ font-face 。我不知道font-awesome是否必要。
 
 
 
访问页面时，它显示正确的日志。因此，您不需要更改库存储库中的任何代码。希望它有帮助。
 
I'm trying to include Fontawesome with a Rails 4 app however the assets aren't making it into the asset pipeline. However, the fonts aren't making it out in production and I can't figure out why. 

File structure organisation

All my assets are stored in /assets/components
so that Fontawesome appears in: /assets/components/font-awesome (they're in a different directory because I'm using Bower).

CSS manifest file:

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


Asset pipeline is set to precompile fonts

# 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
}
I added the precompile instructions so that the fonts would all be precompiled as per this question

Heroku 12 Factor gem is included

#gemfile
group :production do
  gem "rails_12factor"
end


So what's the problem?

When I push to Heroku, it shows that the application is requesting the files but that they're not loading:





And looking at the logs it seems to be a routing issue - I would have expected the font to be served from /assets/fonts but it is apparently looking in /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"):


Why aren't the assets getting served

I'm a bit confused with all of this. Why aren't these fonts being served?
解决方案
This problem maybe caused by a reason that Rails assets can't precompile url() function in CSS file. 

Because your fonts files are precompiled by assets, all urls point to these files must be rewritten to MD5-digested file name. Unfortunately Rails can't precompile url() automatically, at least I think so because I tested some cases and got this conclusion :) In Rails guide, Rails provides these functions using ERB and Sass. see here .

I think there are two ways to solve your problem.

The first, set directory in .bowerrc to public/components and use them manually, don't require them in your assets.

The second, I suggest to use font-url() instead of url() in Font-Awesome, so your application.css.scss will be looked like:
   /* ...
    *= 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;
    }
Redefine the font-path with your actual font path and font-face with font-url() , this function is provided by sass-rails. After precompile, you will see your url has been rewritten to /assets/font-awesome/fonts/fontawesome-webfont-50b448f878a6489819d7dbc0f7dbfba0.eot?v=4.0.3 or something like in public/assets/application-xxxxxx.css.

You can find the same approach in various gems which include assets for example bootstrap-sass, it's a very popular gem. read this file: _glyphicons.scss. You will see:
@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() has been replaced. So I think rewrite @font-face in application.css.scss is the simplest way :) 

By the way, bootstrap and font-awesome both have @font-face. I don't know whether font-awesome is necessary.

When you access the page, it shows the correct log. So you don't need change any code in bower repositories. Hope it helps.

                        
这篇关于如何使用Asset Pipeline从非标准目录传送字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！