使用Rails管道在Heroku上未加載自定義字體

Question

在這篇SO帖子之后 ，我將所有@font-face定義更改為如下所示：

  @font-face {
   font-family: 'Pe-icon-7-stroke';
   src:font-url('/assets/Pe-icon-7-stroke.eot?d7yf1v');
   src:font-url('/assets/Pe-icon-7-stroke.eot?#iefixd7yf1v') format('embedded-opentype'),
   font-url('/assets/Pe-icon-7-stroke.woff?d7yf1v') format('woff'),
   font-url('/assets/Pe-icon-7-stroke.ttf?d7yf1v') format('truetype'),
   font-url('/assets/Pe-icon-7-stroke.svg?d7yf1v#Pe-icon-7-stroke') format('svg');
   font-weight: normal;
   font-style: normal;
  }

所有字體文件都放在/assets/fonts/ 。

我還將聲明上述@font-face的文件從.css類型更改為.scss 。 字體仍在開發中加載，但是當我將更改添加到git並推送到heroku上的生產站點時，字體仍未加載。

這可能並不表示我遇到了問題，但是當我在實時站點上查看編譯后的資產時，發現該字體的定義為：

 font-family:'Pe-icon-7-stroke';
 src:url(/assets/Pe-icon-7-stroke.eot?d7yf1v);

與font-url相反，它使用url （這可能是將sass轉換為css的方式，但也可能意味着舊的application.css正在加載？）

https://kaf.herokuapp.com/assets/application-490d8d687dc0c9b526bf1348ca9a3a6f.css

供參考，這是我在Github上完整的資產目錄

https://github.com/ebbnormal/kaf/tree/master/app/assets/

Answer 1

查看SASS資產助手 ，特別是以下部分：

返回對該資產的網址引用。

asset-url("rails.png")返回url(/assets/rails.png)為方便起見，對於以下每個資產類，都有對應的-path和-url幫助器：圖像，字體，視頻，音頻，javascript ，樣式表。

image-path("rails.png")返回"/assets/rails.png" image-url("rails.png")返回url(/assets/rails.png)

看來您需要刪除font-url中的/assets部分。

Answer 2

 asset-url($relative-asset-path) Returns a url reference to the asset. asset-url("rails.png") returns url(/assets/rails.png) 

為方便起見，對於以下每個資產類別，都有對應的-path和-url幫助器：圖像，字體，視頻，音頻，javascript，樣式表。

• image-path("rails.png")返回"/assets/rails.png"
• image-url("rails.png")返回url(/assets/rails.png)

https://github.com/rails/sass-rails

@font-face {
   font-family: 'Pe-icon-7-stroke';
     src: font-url('Pe-icon-7-stroke.eot?d7yf1v');
     src: font-url('Pe-icon-7-stroke.eot?#iefixd7yf1v') format('embedded-opentype'), 
       font-url('Pe-icon-7-stroke.woff?d7yf1v') format('woff'),
       font-url('Pe-icon-7-stroke.ttf?d7yf1v') format('truetype'),
       font-url('Pe-icon-7-stroke.svg?d7yf1v#Pe-icon-7-stroke') format('svg');
   font-weight: normal;
   font-style: normal;
}

盡管您可能想考慮一下今天是否真的需要所有這些后備格式。

• https://css-tricks.com/snippets/css/using-font-face/
• http://caniuse.com/#feat=woff