ruby-on-rails - 在 Rails 资源管道中使用字体

Question

我在我的 Scss 文件中配置了一些字体，如下所示:

@font-face {
  font-family: 'Icomoon';
  src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'),
       asset-url('icoMoon.woff', font) format('woff'),
       asset-url('icoMoon.ttf', font)  format('truetype'),
       asset-url('icoMoon.svg#Icomoon', font) format('svg');
}

实际的字体文件存储在/app/assets/fonts/

我已添加config.assets.paths << Rails.root.join("app", "assets", "fonts")到我的 application.rb 文件

编译CSS源码如下:

@font-face {
  font-family: 'Icomoon';
  src: url(/assets/icoMoon.eot?#iefix) format("embedded-opentype"), url(/assets/icoMoon.woff) format("woff"), url(/assets/icoMoon.ttf) format("truetype"), url(/assets/icoMoon.svg#Icomoon) format("svg");
}

但是当我运行应用程序时，找不到字体文件。日志:

Started GET "/assets/icoMoon.ttf" for 127.0.0.1 at 2012-06-05 23:21:17 +0100 Served asset /icoMoon.ttf - 404 Not Found (13ms)

为什么资源管道不将字体文件扁平化为/assets？

大家有什么想法吗？

亲切的问候， 尼尔

额外信息:

在检查 Rails 控制台的资源路径和 assetprecompile 时，我得到以下信息:

1.9.2p320 :001 > y Rails.application.config.assets.precompile
---
- !ruby/object:Proc {}
- !ruby/regexp /(?:\/|\\|\A)application\.(css|js)$/
- .svg
- .eot
- .woff
- .ttf
=> nil



1.9.2p320 :002 > y Rails.application.config.assets.paths
---
- /Users/neiltonge/code/neiltonge/app/assets/fonts
- /Users/neiltonge/code/neiltonge/app/assets/images
- /Users/neiltonge/code/neiltonge/app/assets/javascripts
- /Users/neiltonge/code/neiltonge/app/assets/stylesheets
- /Users/neiltonge/code/neiltonge/vendor/assets/images
- /Users/neiltonge/code/neiltonge/vendor/assets/javascripts
- /Users/neiltonge/code/neiltonge/vendor/assets/stylesheets
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/jquery-rails-2.0.0/vendor/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/coffee-rails-3.2.1/lib/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/bourbon-1.3.0/app/assets/stylesheets
- !ruby/object:Pathname
  path: /Users/neiltonge/code/neiltonge/app/assets/fonts
 => nil

Answer 1

1. 如果您的 Rails 版本介于 > 3.1.0 之间和< 4 ，将您的字体放入以下任意文件夹中:

   • app/assets/fonts
   • lib/assets/fonts
   • vendor/assets/fonts

   
   

   对于 Rails 版本 > 4 ，您必须将字体放在 app/assets/fonts 中文件夹。

   注意:要将字体放置在这些指定文件夹之外，请使用以下配置:

   config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/

   对于 Rails 版本 > 4.2 ，建议将此配置添加到 config/initializers/assets.rb 。

   但是，您也可以将其添加到 config/application.rb ，或发送至 config/production.rb

2. 在 CSS 文件中声明您的字体:

   @font-face {
     font-family: 'Icomoon';
     src:url('icomoon.eot');
     src:url('icomoon.eot?#iefix') format('embedded-opentype'),
       url('icomoon.svg#icomoon') format('svg'),
       url('icomoon.woff') format('woff'),
       url('icomoon.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
   }
   

   确保您的字体名称与声明的 URL 部分中的名称完全相同。大写字母和标点符号很重要。在本例中，字体名称应为 icomoon .

3. 如果您在 Rails 中使用 Sass 或 Less > 3.1.0 (您的 CSS 文件具有 .scss 或 .less 扩展名)，然后更改 url(...)在字体声明中为font-url(...) .

   否则，您的 CSS 文件的扩展名应为 .css.erb ，字体声明应为 url('<%= asset_path(...) %>') .

   如果您使用的是 Rails > 3.2.1 ，您可以使用font_path(...)而不是asset_path(...) 。这个助手做了完全相同的事情，但更清晰。

4. 最后，在 CSS 中使用您的字体，就像您在 font-family 中声明的那样。部分。如果它被声明为大写，你可以像这样使用它:

   font-family: 'Icomoon';