使用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