本文介绍了如何使用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,这是一个非常受欢迎的宝石。阅读这个文件:。你会看到:

  @ 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/componentsso 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从非标准目录传送字体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-31 01:43