在 Rails 中添加自定义字体

Question

我正在尝试添加我在Rails应用程序中下载的自定义字体。这就是我所做的：我下载了字体（Georgia.tff）并将其放入app/assets/fonts/Georgia.tff。我的主要CSS文件如下所示：

基础和覆盖.scss

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

这就是我想应用字体的地方：

_header.html.erb

<header class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="header">
      <h1><a href="/">SMART INVESTORS'S CLUB</a></h1>
  </ul>
</header>

它不起作用。我正在使用 Rails 4.2.1。我参考了在我的应用程序中添加自定义字体和向 Rails 4 添加自定义字体的官方方式？。没有运气。 😋

Answer 1

foundation-and-override.scss

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

在application.rb中，您必须添加：

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

并且字体文件"格鲁吉亚.ttf"必须为app/assets/fonts/Georgia.ttf

Answer 2

Rails 为此提供了 font-url helper 方法：

@font-face{
  font-family:'Georgia';
  src:font-url('Georgia.ttf');
}

您也可以只使用资产网址：

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

默认情况下，Sprockets 应该能够在您的 assets 文件夹中找到任何文件，因此不需要额外的配置。