Question

我试图在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;
}

这似乎没有办法。有什么明显缺失的吗？

Answer 1

你最好使用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;
}

这意味着当您预编译资产时，将调用正确的urls（即使使用fingerprinted个文件）。它也应该在开发中工作

Answer 2

试试这个：

@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;
}

要让url(<%= asset_path(...) %>)工作，您的文件需要具有扩展名.css.erb

让我的自定义字体在Rails 4中工作

2 个答案: