Question

遵循此SO post后，我将所有@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

For Reference，这是我在Github上的完整资产目录

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

Answer 1

查看SASS asset helpers，具体来说，请查看此部分：

返回对资产的网址引用。

asset-url("rails.png")返回url(/assets/rails.png)作为   方便，对于以下每个资产类别都有   相应的-path和-url助手：图片，字体，视频，音频，   javascript，stylesheet。

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) 
为方便起见，对于以下每个资产类别都有   对应的路径和-url助手：   图像，字体，视频，音频，   javascript，stylesheet。


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;
}

虽然您可能想考虑今天是否真的需要所有这些后备格式。

使用rails管道在heroku上加载自定义字体

2 个答案: