Heroku字体资产不起作用

Question

放置字体 app/assets/fonts

添加

Add the fonts path
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf )

在production.rb和development.rb中

以css链接的字体如:

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

似乎在开发中工作.但在HEROKU似乎并不奏效.它找不到/assets/icomoon.eot.

此链接中的解决方案似乎不起作用

在Rails资产管道中使用字体

Answer 1

如果您使用常规的旧CSS来定位资产而不是资产管道帮助程序,那么像字体这样的资产将用于开发但不能用于生产.Rails 4添加了对资产管道的重大更改,以鼓励人们正确使用它,而不是使用旧的css方法引用资产.

要解决此问题,您需要使用新的资产管道帮助程序指向字体的指纹缓存版本.而不是url(不使用资产管道),您需要使用font-url(使用它).为此,您可能必须在样式表中使用Sass或嵌入ERB.

示例(使用SCSS):

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

见这里:http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets

Answer 2

根据对这个答案的评论(以及不必要的downvotes),我修改了我的答案如下:

看来Rails现在已经创建了一种处理assets文件夹中字体的方法.它的调用font-path和工作原理如下:

如果将自定义字体添加到/ assets/fonts文件夹,则可以使用 font-path帮助程序访问其中的文件.然后可以使用帮助程序在样式表和其他资源中使用它font-path:

|-app/
|---assets/
|-----fonts/
|-----images/
|-----javascripts/
|-----stylesheets/

@font-face {
  font-family:'icofonts';
  src:font-url('icofonts.eot');
  src:font-url('icofonts.eot?#iefix') format('embedded-opentype'),

  ...
} 

这适用于预编译资产(Heroku无论如何)和静态资产.如果你想要pre-Rails 4方法实现这一点,请参考我的答案如下:

我们在Heroku上有字体工作:http://firststop.herokuapp.com(还在演示中)

这是我们的CSS:

#assets/application.css
/*-- Akagi Font --*/
@font-face {
    font-family: 'akagi';
    src: url('fonts/akagi-th-webfont.eot'),
    src: url('fonts/akagi-th-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/akagi-th-webfont.woff') format('woff'),
         url('fonts/akagi-th-webfont.ttf') format('truetype'),
         url('fonts/akagi-th-webfont.svg#akagithin') format('svg');
    font-weight: 300;
    font-style: normal;

}
@font-face {
    font-family: 'akagi';
    src: url('fonts/akagi-bk-webfont.eot');
    src: url('fonts/akagi-bk-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/akagi-bk-webfont.woff') format('woff'),
         url('fonts/akagi-bk-webfont.ttf') format('truetype'),
         url('fonts/akagi-bk-webfont.svg#akagibook') format('svg');
    font-weight: 400;
    font-style: normal;

}
@font-face {
    font-family: 'akagi';
    src: url('fonts/akagi-sb-webfont.eot');
    src: url('fonts/akagi-sb-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/akagi-sb-webfont.woff') format('woff'),
         url('fonts/akagi-sb-webfont.ttf') format('truetype'),
         url('fonts/akagi-sb-webfont.svg#akagisemibold') format('svg');
    font-weight: 500;
    font-style: normal;

}

我们将字体放入 /stylesheets/fonts folder

我们只是做标准的预编译字体来让所有的CSS都能在Heroku上运行,并且它可以工作.我怀疑你的路径不正确.也许尝试将您的fonts目录移动到/ assets/stylesheets文件夹 :)

Answer 3

实际上,我刚刚尝试了这篇评论中提出的解决方案,并且它运行得很好.似乎您只需更改预编译指令的正则表达式,以便Heroku正确查找资产.

即config.assets.precompile += %w( .svg .eot .woff .ttf )改为config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/.

编辑:根据Heroku的文档,RAILS_ENV=production在运行assets:precompilerake任务时可能还需要添加.

Answer 4

尝试/assets/从所有字体路径中删除。

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

scaffolds.css如果它在assets/stylesheets.