我有一些字体被配置在我的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。加入(“应用程序”,“资产”,“字体”)到我的应用程序。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");
}

但当我运行应用程序的字体文件没有被发现。日志:

start GET "/assets/icoMoon.ttf" for 127.0.0.1 at 2012-06-05 23:21:17 +0100 已服务资产/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

当前回答

If your Rails version is between > 3.1.0 and < 4, place your fonts in any of the these folders: app/assets/fonts lib/assets/fonts vendor/assets/fonts For Rails versions > 4, you must place your fonts in the app/assets/fonts folder. Note: To place fonts outside of these designated folders, use the following configuration: config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/ For Rails versions > 4.2, it is recommended to add this configuration to config/initializers/assets.rb. However, you can also add it to either config/application.rb , or to config/production.rb Declare your font in your CSS file: @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; } Make sure your font is named exactly the same as in the URL portion of the declaration. Capital letters and punctuation marks matter. In this case, the font should have the name icomoon. If you are using Sass or Less with Rails > 3.1.0 (your CSS file has .scss or .less extension), then change the url(...) in the font declaration to font-url(...). Otherwise, your CSS file should have the extension .css.erb, and the font declaration should be url('<%= asset_path(...) %>'). If you are using Rails > 3.2.1, you can use font_path(...) instead of asset_path(...). This helper does exactly the same thing but it's more clear. Finally, use your font in your CSS like you declared it in the font-family part. If it was declared capitalized, you can use it like this: font-family: 'Icomoon';

其他回答

我最近将Rails 3应用程序升级到Rails 4时也遇到了类似的问题。我的字体在Rails 4+中不能正常工作,我们只允许将字体保存在app/assets/fonts目录下。但是我的Rails 3应用程序有一个不同的字体组织。所以我必须配置应用程序,使它仍然与Rails 4+有我的字体在不同的地方,而不是app/assets/fonts。我已经尝试了几个解决方案,但在我发现非愚蠢的消化资产宝石后,它只是让它变得如此简单。

通过在Gemfile中添加以下代码行来添加这个gem:

gem 'non-stupid-digest-assets'

然后运行:

bundle install

最后在config/initializers/non_digest_assets中添加以下一行。rb文件:

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

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

只需要把你的字体放在app/assets/fonts文件夹中,并在app开始使用application.rb中编写代码时设置自动加载路径

config.assets.paths << Rails.root。加入("app", "assets", "fonts") 而且

然后在css中使用以下代码。

@font面{

 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;

}

试一试。

谢谢

我在Rails 4.2 (ruby 2.2.3)上遇到了这个问题,不得不编辑字体很棒的_paths。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;
}

以及以下工作:

@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;
}

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

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

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

然后重新加载浏览器。

如果你不想跟踪字体的移动:

# Adding Webfonts to the Asset Pipeline
config.assets.precompile << Proc.new { |path|
  if path =~ /\.(eot|svg|ttf|woff)\z/
    true
  end
}

这里有一个转折:

你应该把所有的字体放在app/assets/fonts/中,因为它们在默认情况下会在登台和生产中被预编译——当推送到heroku时,它们会被预编译。 默认情况下,放置在vendor/assets中的字体文件不会在登台或生产时预编译-它们将在heroku上失败。源!

- @plapier,以为机器人/波旁威士忌

我坚信把厂商字体放到厂商/资产/字体中 这比把它们放到app/assets/字体中更有意义。与 这两行额外的配置对我来说工作得很好 Rails 4):

app.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')  
app.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

- @jhilden, thoughtbot/波旁威士忌

我还在rails 4.0.0上测试了它。实际上,最后一行已经足够从供应商文件夹安全预编译字体了。花了几个小时才弄明白。希望它能帮助到某人。