我有一些字体被配置在我的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';
把你的字体文件(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 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
然后重新加载浏览器。