我有一些字体被配置在我的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

当前回答

如果你有一个叫做scaffold。css的文件。Scss,那么就有可能覆盖您在其他文件中所做的所有自定义操作。我把那个文件注释掉了,突然之间一切都正常了。如果那个文件里没有什么重要的东西,你还不如把它删掉!

其他回答

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

1)把你所有的字体文件放在app/assets/fonts/下,实际上你不限制把它放在fonts文件夹名称下。你可以放任何你喜欢的子文件夹名。例如app/assets/abc或app/assets/anotherfonts。但我强烈建议你把它放在app/assets/fonts/文件夹结构更好。

2)从你的sass文件中,使用sass helper 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)运行bundle exec rake assets:从本地机器预编译并查看application.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;
}

如果你想了解更多资产管道是如何工作的,你可以访问下面的简单指南: https://designcode.commandrun.com/rails-asset-pipeline-simple-guide-830e2e666f6c#.6lejlayk2

把你的字体文件(woff, woff2, eot, ttf,…)放在/app/assets/fonts目录下。

然后添加以下到您的配置/初始化/资产。rb:

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

在上面的答案中,woff2没有包括在内(为了将来的参考,你可能需要添加其他扩展,只需在这里添加|{font-file-extension})

使用css文件中的字体:

重要的是,你需要将它从stylesheet.css重命名为stylesheet.css.scss(这是为了让font-url在资产预编译后正确地在生产中转换字体的url):

@font-face {
  font-family: 'MyFont'
  src: font-url('myfont.woff') format('woff');
}

body{
  font-family: 'MyFont'
}

然后运行:

rails assets:precompile

在运行资产预编译后,你的字体文件从app/assets/fonts/myfont复制。woff到public/assets/myfont-{SOME_DIGEST_KEY}。woff的位置。现在上面的css在生产中也很像图像资产。

您还可以看到,在预编译资产命令之后创建了一个应用程序-{somedigest}.css,在其中您将看到 现在,我们的font-url('myfont.woff')将被转换为url(/assets/myfont.woff-{SOME_DIGEST_KEY}.woff),并且摘要与文件移动到的位置匹配。通过这种方式,更新你的字体文件也可以适当地破坏浏览器缓存等。

确保你的nginx也服务于public/assets文件夹以获得更好的性能。这是用rails 5和rails 6在生产中测试的。它也应该工作与rails 4最有可能。

我最近将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,并不能得到footable图标显示。显示的是小方框,而不是我所期望的折叠行上的(+)和小排序箭头。在学习了这里的信息之后,我对代码做了一个简单的更改:删除css中的字体目录。也就是说,像这样更改所有的css条目:

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

看起来像这样:

src:url('footable.eot');

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