使用带有Rails资产管道的字体。-UsingfontswithRailsassetpipeline

9  

Here my approach to using fonts in asset pipeline:

下面是我在资产管道中使用字体的方法:

1) Put all your font file under app/assets/fonts/, actually you are not restricted to put it under fonts folder name. You can put any subfolder name you like. E.g. app/assets/abc or app/assets/anotherfonts. But i highly recommend you put it under app/assets/fonts/ for better folder structure.

1)把你所有的字体文件放在app/assets/字体下，实际上你不需要把它放在字体文件夹下。您可以添加任何您喜欢的子文件夹名称。如应用/资产/ abc或应用/资产/ anotherfonts。但是我强烈推荐你把它放在app/assets/字体/更好的文件夹结构中。

2) From your sass file, using the sass helper font-path to request your font assets like this

2)从您的sass文件中，使用sass助手的font-path来请求您的字体资产。

@font-face {
    font-family: 'FontAwesome';
    src: url(font-path('fontawesome-webfont.eot') + '?v=4.4.0');
    src: url(font-path('fontawesome-webfont.eot') + '?#iefix&v=4.4.0') format('embedded-opentype'),
         url(font-path('fontawesome-webfont.woff2') + '?v=4.4.0') format('woff2'),
         url(font-path('fontawesome-webfont.woff') + '?v=4.4.0') format('woff'),
         url(font-path('fontawesome-webfont.ttf') + '?v=4.4.0') format('truetype'),
         url(font-path('fontawesome-webfont.svg') + '?v=4.4.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

3) Run bundle exec rake assets:precompile from your local machine and see your application.css result. You should see something like this:

3)运行bundle exec rake资产:从本地机器预编译并查看应用程序。css的结果。你应该看到这样的东西:

@font-face {
    font-family: 'FontAwesome';
    src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?v=4.4.0");
    src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?#iefix&v=4.4.0") format("embedded-opentype"), url("/assets/fontawesome-webfont-3c4a1bb7ce3234407184f0d80cc4dec075e4ad616b44dcc5778e1cfb1bc24019.woff2" "?v=4.4.0") format("woff2"), url("/assets/fontawesome-webfont-a7c7e4930090e038a280fd61d88f0dc03dad4aeaedbd8c9be3dd9aa4c3b6f8d1.woff" "?v=4.4.0") format("woff"), url("/assets/fontawesome-webfont-1b7f3de49d68b01f415574ebb82e6110a1d09cda2071ad8451bdb5124131a292.ttf" "?v=4.4.0") format("truetype"), url("/assets/fontawesome-webfont-7414288c272f6cc10304aa18e89bf24fb30f40afd644623f425c2c3d71fbe06a.svg" "?v=4.4.0#fontawesomeregular") format("svg");
    font-weight: normal;
    font-style: normal;
}

If you want to know more how asset pipeline work, you can visit the following simple guide: https://designcode.commandrun.com/rails-asset-pipeline-simple-guide-830e2e666f6c#.6lejlayk2

如果您想了解更多关于资产管道的工作，您可以访问以下简单的指南:https://designcode.commandrun.com/rails-asset- simple-guide-830e2e666f6c#.6lejlayk2。

5  

I'm using Rails 4.2, and could not get the footable icons to show up. Little boxes were showing, instead of the (+) on collapsed rows and the little sorting arrows I expected. After studying the information here, I made one simple change to my code: remove the font directory in css. That is, change all the css entries like this:

我使用的是Rails 4.2，并不能让footable图标出现。小框显示，而不是(+)在折叠的行和我所期望的小排序箭头。在研究了这里的信息之后，我对代码做了一个简单的修改:删除css中的字体目录。也就是说，修改所有css条目如下:

src:url('fonts/footable.eot');

to look like this:

看起来像这样:

src:url('footable.eot');

It worked. I think Rails 4.2 already assumes the font directory, so specifying it again in the css code makes the font files not get found. Hope this helps.

它工作。我认为Rails 4.2已经假定了字体目录，所以在css代码中再次指定它会使字体文件不被发现。希望这个有帮助。

4  

I was having this problem on Rails 4.2 (with ruby 2.2.3) and had to edit the font-awesome _paths.scss partial to remove references to $fa-font-path and removing a leading forward slash. The following was broken:

我在Rails 4.2(使用ruby 2.2.3)上遇到了这个问题，并且不得不编辑那些令人生畏的路径。scss部分删除对$fa-font-path的引用并删除一个前导斜杠。以下被打破了:

@font-face {
  font-family: 'FontAwesome';
  src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
  src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
    font-url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
    font-url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
    font-url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
    font-url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

And the following works:

以下工作:

@font-face {
  font-family: 'FontAwesome';
  src: font-url('fontawesome-webfont.eot?v=#{$fa-version}');
  src: font-url('fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
    font-url('fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
    font-url('fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
    font-url('fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
    font-url('fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

An alternative would be to simply remove the forward slash following the interpolated $fa-font-path and then define $fa-font-path as an empty string or subdirectory with trailing forward slash (as needed).

另一种方法是简单地删除插入$fa-font-path后的正斜杠，然后将$fa-font-path定义为一个空字符串或子目录，后面是斜杠(根据需要)。

Remember to recompile assets and restart your server as needed. For example, on a passenger setup:

记住要重新编译资产并根据需要重新启动服务器。例如，在乘客设置上:

prompt> rake assets:clean; rake assets:clobber
prompt> RAILS_ENV=production RAILS_GROUPS=assets rake assets:precompile
prompt> service passenger restart

Then reload your browser.

然后重新加载浏览器。

2  

I had a similar issue when I upgraded my Rails 3 app to Rails 4 recently. My fonts were not working properly as in the Rails 4+, we are only allowed to keep the fonts under app/assets/fonts directory. But my Rails 3 app had a different font organization. So I had to configure the app so that it still works with Rails 4+ having my fonts in a different place other than app/assets/fonts. I have tried several solutions but after I found non-stupid-digest-assets gem, it just made it so easy.

最近我把Rails 3应用升级到Rails 4时也遇到了类似的问题。我的字体没有像Rails 4+那样正常工作，我们只允许在app/assets/字体目录下保留字体。但是我的Rails 3应用有一个不同的字体组织。因此，我必须配置这个应用程序，这样它仍然可以使用Rails 4+在不同的地方使用我的字体，而不是应用程序/资产/字体。我已经尝试了几种解决方案，但在我发现了非愚蠢的资产之后，它就变得很简单了。

Add this gem by adding the following line to your Gemfile:

在Gemfile中添加以下一行，添加这个gem:

gem 'non-stupid-digest-assets'

Then run:

然后运行:

bundle install

And finally add the following line in your config/initializers/non_digest_assets.rb file:

最后，在配置/初始化器/non_digest_assets中添加以下行。rb文件:

NonStupidDigestAssets.whitelist = [ /\.(?:svg|eot|woff|ttf)$/ ]

That's it. This solved my problem nicely. Hope this helps someone who have encountered similar problem like me.

就是这样。这很好地解决了我的问题。希望这能帮助遇到类似问题的人。

1  

If you have a file called scaffolds.css.scss, then there's a chance that's overriding all the custom things you're doing in the other files. I commented out that file and suddenly everything worked. If there isn't anything important in that file, you might as well just delete it!

如果你有一个叫做脚手架。css的文件。scss，还有一个可能是重写所有你在其他文件中做的自定义的事情。我把文件注释掉了，突然一切都好了。如果这个文件中没有什么重要的东西，你可以删掉它!

1  

In my case the original question was using asset-url without results instead of plain url css property. Using asset-url ended up working for me in Heroku. Plus setting the fonts in /assets/fonts folder and calling asset-url('font.eot') without adding any subfolder or any other configuration to it.

在我的例子中，最初的问题是使用没有结果的资产url，而不是简单的url css属性。使用资产url最终在Heroku为我工作。另外，在不添加任何子文件夹或任何其他配置的情况下，将字体设置为/assets/字体文件夹并调用资产url('font.eot')。

-6  

just place your fonts inside app/assets/fonts folder and set the autoload path when app start using writing the code in application.rb

只要把你的字体放在app/assets/字体文件夹里，然后在应用程序开始使用代码的时候设置autoload路径。

config.assets.paths < and

 font-family: 'icomoon';
 src: asset-url('icomoon.eot');
 src: asset-url('icomoon.eot') format('embedded-opentype'),
      asset-url('icomoon.woff') format('woff'),
      asset-url('icomoon.ttf') format('truetype'),
      asset-url('icomoon.svg') format('svg');
 font-weight: normal;
 font-style: normal;