使用 Rails 4.2.4 的字体

Question

我试图在 Rails 4.2.4 应用程序中使用特定字体，但没有任何效果——它顽固地拒绝显示。我在上面花了几个小时，但我不知道自己做错了什么。

字体位于app/assets/fonts/comic_andy.tff。

SCSS（位于app/assets/stylesheets/sass/application.css.scss）：

@font-face { 
font-family: "comic_andy"; 
src: font-url('comic_andy.ttf');
src: font-url('comic_andy.ttf'), format('truetype'); 
}

在浏览器中，SCSS 编译为 CSS：

@font-face {
font-family: "comic_andy";
src: url(/fonts/comic_andy.ttf);
src: url(/fonts/comic_andy.ttf), format("truetype");
}

它不是应该编译成 assets/comic_andy.ttf 吗？我是 Rails 的新手，虽然我得到了资产管道 是 的东西，但事实证明，要让我的头脑足够高效地使用它仍然很棘手。

我通读了 Rails 4 - Custom Fonts, How to use fonts in Rails 4 和其他几个与 fonts/Rails/the 资产管道相关的 Stack Overflow 问题，并尝试了很多建议，包括（但不限于！）添加 config.assets.paths << Rails.root.join('app', 'assets', 'fonts') 到 application.rb （不），尝试 asset-url （不）， font-url （不），和普通的 url （不），并在 rake assets:clobber（不）。 :(

Answer 1

不要更改资产路径

如果您将资源投入 app/assets，那么一切就绪，如前所述 here。

The default locations are: the images, javascripts and stylesheets directories under the app/assets folder, but these subdirectories are not special - any path under assets/* will be searched.

使用asset-url或font-url

如果您在 Rails 指南上参考 Ruby 上的 The Asset Pipeline page，您会发现这里的适当方法是使用 asset-url（或 font-url) 如：

@font-face {
    font-family: 'comic_andy';
    src: asset-url('comic_andy.ttf') format('truetype');
}

在您的开发环境中，它应该编译为：

@font-face {
    font-family: 'comic_andy';
    src: url(/assets/comic_andy.ttf) format("truetype");
}

注意：.ttf 文件的正确格式是 format("truetype").

确保您的字体格式受支持

如果还是不行，可能是你的ttf文件有问题（我的项目使用的是woff格式），你应该使用Font Squirrel Webfont generator之类的服务来修复它。

Answer 2

问题终于解决了。 F I N A L L Y。

SASS：

@font-face { 
    font-family: "comic_andy"; 
    src: font-url('comicandy.ttf');
    src: font-url('comicandy.ttf'), format("truetype"); }

Application.rb:

config.assets.paths << Rails.root.join("app", "assets", "fonts")
config.assets.enabled = true

Asshat Pipeline 没有正确编译 SASS，因为我缺少 config.assets.enabled = true。沿线的某个地方，字体也被重命名了。我不知道为什么或如何帮助解决问题，但它似乎以某种方式帮助解决了问题。