Using Fonts With Rails Asset Pipeline

最近项目中的图标全部用上了图标字体(Icon Font),由于rails 3.x的asset pipeline的存在,字体的引用遇到了问题,把解决办法记录一下。

不了解图标字体的同学可以看一下张鑫旭:如何灵活利用免费开源图标字体-IcoMoon篇,博主接下来也会写一篇关于图标字体资源、制作工具比较的文章,有兴趣的同学可以期待一下。

解决办法如下:

  • 首先把全部fonts文件全部放到文件夹app/assets/fonts

  • 告诉服务器fonts文件的位置,然后把那些特定扩展名的font文件预编译。

一般你只需要在config/environments/production.rb这个文件添加以下代码,因为一般不会在本地预编译你的资源文件,如果你想在本地预编译的话,那就在config/environments/development.rb加上同样的代码。

config/environments/production.rb
1
2
3
4
5
# 添加字体路径
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

# 预编译额外的资源文件
config.assets.precompile += %w( .svg .eot .woff .ttf )
  • 然后你就可以在css文件添加以下代码
1
2
3
4
5
6
7
8
9
10
@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”。

如果你在Rails 3.1使用Sass或者Less(文件扩展名为.scss或者.less)的话, 那就得把url(...)改成font-url(...)

如果你使用.css.erb的话,那就把url(...)改成 url('<%= asset_path(...) %>')

  • 最后,要使用上面已经定义好的字体的话,只需要添加font-family: 'Icomoon';

Useful Links: