css - 在 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 的新手，虽然我了解 Assets 管道 是什么，但事实证明，要充分利用我的头脑以非常有效地使用它仍然很棘手。

我已通读 Rails 4 - Custom Fonts , How to use fonts in Rails 4以及其他几个与字体/Rails/ Assets 管道相关的 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

如果你引用The Asset Pipeline page在 Ruby on Rails 指南中，您会看到这里的适当方法是使用 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 之类的服务。要解决这个问题。