自定義字體在 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 

我之前是預編譯的。 我的生產環境是我自己的服務器。 字體是使用 fontcustom 和 svgs 生成的。 我用這篇文章來做到這一點。

字體正在預編譯...如果我編輯頁面上的 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：為什么在生產中未加載字體？