我正在尝试让自定义字体在 Rails 4 中工作。这是我的 CSS 中的内容:
@font-face {
font-family: 'bebas';
src: url('<%= asset_path 'bebasneue-webfont.eot' %>');
src: url('<%= asset_path 'bebasneue-webfont.eot?#iefix' %>') format('embedded-opentype'),
url('<%= asset_path 'bebasneue-webfont.woff' %>') format('woff'),
url('<%= asset_path 'bebasneue-webfont.ttf' %>') format('truetype'),
url('<%= asset_path 'bebasneue-webfont.svg#bebas_neueregular' %>') format('svg');
font-weight: normal;
font-style: normal;
}
我将字体文件添加到 app/assets/fonts 中:
bebasneue-webfont-069a8fc829e693fcf470f2352359e221.woff
bebasneue-webfont-56194c50f0b197ee12f067a502a17b30.svg
bebasneue-webfont-755b9b8c0760ef96285f451dca15e4ba.eot
bebasneue-webfont-7d82d863523d9e753d1e51e240a48b6f.ttf
在 config/application.rb 我添加了以下内容:
config.assets.paths << Rails.root.join("app", "assets", "fonts")
然后我在我的 CSS 标记中简单地引用它如下:
.lineup .table .logos .price {
text-transform: uppercase;
font-family: 'bebas', sans-serif;
}
这似乎并不能解决问题。是否缺少明显的东西？
最佳答案
最好使用 scss / sass preprocessor让它工作(相对于 Rails ERB 预处理器):
#app/assets/stylesheets/application.css.scss
@font-face {
font-family: 'bebas';
src: asset_url("bebasneue-webfont.eot");
src: asset_url("bebasneue-webfont.eot?#iefi") format('embedded-opentype'),
asset_url("bebasneue-webfont.woff") format('woff'),
asset_url("bebasneue-webfont.ttf") format('truetype'),
asset_url("bebasneue-webfont.svg#bebas_neueregular") format('svg');
font-weight: normal;
font-style: normal;
}
这意味着当您预编译 Assets 时，将调用正确的 url(即使是 fingerprinted 文件)。它也应该在开发中起作用
关于css - 让我的自定义字体在 Rails 4 中工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24125623/