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

【问题标题】：Getting my custom font to work in Rails 4让我的自定义字体在 Rails 4 中工作
【发布时间】：2014-06-09 17:32:41
【问题描述】：

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

这似乎不起作用。有什么明显的缺失吗？

【问题讨论】：

标签： css ruby-on-rails ruby-on-rails-4 fonts

【解决方案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 文件）。它也应该在开发中工作

【讨论】：

【解决方案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

【讨论】：

不过，我正在使用 .css.erb 扩展名。
尝试在原始代码中使用font-url 而不是url
实际上放弃它，可能尝试src: asset-url 支持或url 或尝试删除您的erb标签周围的单引号：<%= asset_path 'bebasneue-webfont.eot' %>（参见上面的编辑）
该死的。好吧，我只是在这里解决问题。确保在测试更改之前重新启动服务器。如果您在上面复制粘贴我的分析器，我注意到我有一个 typeo ...我猜你得到一个 404 并且资产在启动服务器后不在 /assets/ 中吗？试一试src: url("<%= asset_path('fonts.woff') %>"); 问题可能是您使用的是单引号而不是双引号。
如果您复制粘贴代码，则第三行缺少双引号，这可能是罪魁祸首。