css - 如何在 SCSS 文件中加载自定义字体？

Question

尽管对此进行了数小时的研究，但我似乎无法找到任何可行的解决方案。我正在尝试将自定义字体加载到我的应用程序中，到目前为止，这就是我所拥有的：

@font-face {
  font-family: 'proximaNova-bold';
  src: asset_url('/fonts/proxima_nova_bold/ProximaNova-Bold.eot');
  src: asset_url('/fonts/proxima_nova_bold/ProximaNova-Bold.eot?#iefix') format('embedded-opentype'),
       asset_url('/fonts/proxima_nova_bold/ProximaNova-Bold.woff') format('woff'),
       asset_url('/fonts/proxima_nova_bold/ProximaNova-Bold.ttf') format('truetype'),
       asset_url('/fonts/proxima_nova_bold/ProximaNova-Bold.svg#ProximaNova-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}

这是我的文件树的样子：

注意：我使用asset_url它是因为这将被部署到 Heroku（我相信生产和开发中的 url 是不同的）

这是我收到的错误消息：

ActionController::RoutingError (No route matches [GET] "/ProximaNova-`Bold.ttf"):`

标签： cssruby-on-rails

Answer 1

将字体文件从子文件夹 fonts/proxima_nova_bold 移动到字体（app/assets/fonts），这是导入它的方法

@font-face {
    font-family: 'ProximaNova-Bold';
    src: asset-url('ProximaNova-Bold.eot');
    src: asset-url('ProximaNova-Bold.eot') format('embedded-opentype'),
         asset-url('ProximaNova-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}