在Rails 4.0中找不到带有自定义字体的Sass URL的@ font-face [英] @font-face in Rails 4.0 with Sass URL not found for custom fonts
问题描述
在我的Rails项目中,我试图使用自定义字体.有很多与此问题相关的答案,例如没有帮助的答案,我编辑了development.rb
:
In my Rails project I am trying to use custom fonts. There are lots of answers related to this question, like this answer which didn't help, I edited development.rb
:
# Add the fonts path
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
# Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf )
它仍然显示No route matches [GET] "/assets/chalkduster-webfont.woff"
我像这样设置我url
:
@font-face {
font-family: 'chalkdusterregular';
src: url('chalkduster-webfont.eot');
src:url('chalkduster-webfont.svg#chalkdusterregular') format('svg'),
url('chalkduster-webfont.eot?#iefix') format('embedded-opentype'),
url('chalkduster-webfont.woff') format('woff'),
url('chalkduster-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
我在源代码中尝试过font_path('')
,而且font-url()
它从不工作. :(
I tried font_path('')
within source and also font-url()
it never works. :(
推荐答案
尝试asset-url()
.为我工作.
@font-face {
font-family: 'chalkdusterregular';
src: asset-url('chalkduster-webfont.eot');
src: asset-url('chalkduster-webfont.svg#chalkdusterregular') format('svg'),
asset-url('chalkduster-webfont.eot?#iefix') format('embedded-opentype'),
asset-url('chalkduster-webfont.woff') format('woff'),
asset-url('chalkduster-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
此外,我只添加字体路径并在config/environments/production.rb中预编译其他资产
Also, I only add the fonts path and precompile additional assets in config/environments/production.rb
# Add the fonts path
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
# Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf )
不需要添加到config/environments/development.rb,因为asset-url
有点神奇.
Doesn't need to be added to config/environments/development.rb as asset-url
works a little magic.
这篇关于在Rails 4.0中找不到带有自定义字体的Sass URL的@ font-face的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!