我有一些字体被配置在我的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
这里有一个转折:
你应该把所有的字体放在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上测试了它。实际上,最后一行已经足够从供应商文件夹安全预编译字体了。花了几个小时才弄明白。希望它能帮助到某人。
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';
这里有一个转折:
你应该把所有的字体放在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上测试了它。实际上,最后一行已经足够从供应商文件夹安全预编译字体了。花了几个小时才弄明白。希望它能帮助到某人。
下面是我在资产管道中使用字体的方法:
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