自定义字体在 Rails Asset Pipeline 中不起作用

Question

我的 Rails 应用程序中有这个文件结构：

\APP
+---assets
|   +---fonts
|   |       icons.eot
|   |       icons.svg
|   |       icons.ttf
|   |       icons.woff
|   +---icons
|   +---images
|   +---javascripts
|   +---stylesheets
+---controllers
|
... etc ...

我的自定义字体（图标）在开发中有效，但在生产（或暂存）中无效。我知道它与资产管道（404 错误）有关。如何显示我的图标/字体？

我的 _icons.scss 文件（包含在 application.css.scss 中）：

@font-face {
  font-family: "icons";
  src: font-url("icons.eot");
  src: font-url("icons.eot?#iefix") format("embedded-opentype"),
       font-url("icons.woff") format("woff"),
       font-url("icons.ttf") format("truetype"),
       font-url("icons.svg#icons") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: "icons";
    src: font-url("icons.svg#icons") format("svg");
  }
}

[data-icon]:before {
  content: attr(data-icon);
}

[data-icon]:before,
.icon-ico-addcart:before,
.icon-ico-addcart-hover:before,
.icon-ico-allparsers-menu:before,
.icon-ico-blog-menu:before,
.icon-ico-cart:before,
...

我得到的错误：

GET http://127.0.0.1:8888/assets/icons.woff 
GET http://127.0.0.1:8888/assets/icons.ttf 404 (Not Found)      application-e60c1d16b23dd8ae118e0bb3a1d3311c.js:6129

我之前在预编译。我的生产环境是我自己的服务器。字体是使用带有 svgs 的 fontcustom 生成的。我使用 this 文章来做到这一点。

正在预编译字体...如果我在页面上编辑 application.css 文件，更改

url('/assets/icons.woff')

至

url('/assets/icons-8695a8c5b193c6423e0b3b7a9c71b808.woff')

我的图片出现了。这意味着我的资产正在预编译，但我无法在我的 scss 文件中正确引用它们。

Answer 1

可能是内容类型 (application/x-font-woff) 没有随资产一起提供，我将从这里开始。

Answer 2

您在生产中使用什么？英雄联盟？

尝试预编译这些类型的文件：

 # In config/initializers/assets.rb
 Rails.application.config.assets.precompile += %w( .ttf )

包括所有字体结尾。您也可以尝试通过 CDN 添加字体。

如果这不起作用，也许查看这个答案：Rails 4: Why are fonts not loading in production?

自定义字体在 Rails Asset Pipeline 中不起作用

Custom Font not working in Rails Asset Pipeline

css

ruby-on-rails

asset-pipeline