我有一些字体被配置在我的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
下面是我在资产管道中使用字体的方法:
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
这里有一个转折:
你应该把所有的字体放在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