这个问题可能是Rails资源无法预编译的原因造成的url()
CSS 文件中的函数。
由于您的字体文件是由资源预编译的,因此所有指向这些文件的 url 都必须重写为 MD5 摘要的文件名。不幸的是 Rails 无法预编译url()
自动,至少我这么认为,因为我测试了一些案例并得到了这个结论:) 在 Rails 指南中,Rails 使用 ERB 和 Sass 提供了这些功能。看here http://guides.rubyonrails.org/asset_pipeline.html#css-and-erb .
我认为有两种方法可以解决你的问题。
首先,设置目录在.bowerrc
to public/components
并手动使用它们,不需要它们在您的资产中。
第二个,我建议使用font-url()
代替url()
在 Font-Awesome 中,所以你的application.css.scss
将看起来像:
/* ...
*= require bootstrap/dist/css/bootstrap
*= require font-awesome/css/font-awesome
*= require_self
*= require_tree .
*/
@font-face {
font-family: 'FontAwesome';
src: font-url('font-awesome/fonts/fontawesome-webfont.eot?v=4.0.3');
src: font-url('font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),
font-url('font-awesome/fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'),
font-url('font-awesome/fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'),
font-url('font-awesome/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
使用实际字体路径和字体重新定义字体路径font-url()
,这个功能是sass-rails提供的。预编译后,你会看到你的url已被重写为/assets/font-awesome/fonts/fontawesome-webfont-50b448f878a6489819d7dbc0f7dbfba0.eot?v=4.0.3
或者类似的东西public/assets/application-xxxxxx.css
.
您可以在各种 gem 中找到相同的方法,其中包括资产,例如 bootstrap-sass,它是一个非常受欢迎的 gem。读取这个文件:_glyphicons.scss https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_glyphicons.scss。你会看见:
@font-face {
font-family: 'Glyphicons Halflings';
src: font-url('#{$icon-font-path}#{$icon-font-name}.eot');
src: font-url('#{$icon-font-path}#{$icon-font-name}.eot?#iefix') format('embedded-opentype'),
font-url('#{$icon-font-path}#{$icon-font-name}.woff') format('woff'),
font-url('#{$icon-font-path}#{$icon-font-name}.ttf') format('truetype'),
font-url('#{$icon-font-path}#{$icon-font-name}.svg#glyphicons_halflingsregular') format('svg');
}
url()
已被替换。所以我想重写@font-face
in application.css.scss
是最简单的方法:)
顺便说一下,bootstrap 和 font-awesome 都有@font-face
。我不知道 font-awesome 是否有必要。
当您访问该页面时,它会显示正确的日志。因此您不需要更改 Bower 存储库中的任何代码。希望能帮助到你。