Heroku字体资产不起作用

时间:2013-10-11 17:02:55

标签: ruby-on-rails heroku

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。

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

Using fonts with Rails asset pipeline

11 个答案:

答案 0 :(得分:29)

如果您使用常规的旧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

答案 1 :(得分:13)

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

似乎Rails现在已经创建了一种处理assets文件夹中字体的方法。它是called 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无论如何)和静态资产。如果你想要前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文件夹:)

答案 2 :(得分:9)

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

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

修改:根据Heroku的文档运行RAILS_ENV=production rake任务时,可能还需要添加assets:precompile

答案 3 :(得分:2)

尝试从所有字体路径中删除/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

答案 4 :(得分:2)

我通过结合使用所有答案和评论来解决问题。我的示例使用了Foundation Icon Fonts。

application.rb文件中添加以下内容:

config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

将您的application.css文件重命名为application.css.scss并使用font-urlasset-path指令:

@font-face {
  font-family: "foundation-icons";
  src: font-url( asset-path("foundation-icons.eot") );
  src: font-url( asset-path("foundation-icons.eot?#iefix") ) format("embedded-opentype"),
       font-url( asset-path("foundation-icons.woff") ) format("woff"),
       font-url( asset-path("foundation-icons.ttf") ) format("truetype"),
       font-url( asset-path("foundation-icons.svg#fontcustom") ) format("svg");
  font-weight: normal;
  font-style: normal;
}

答案 5 :(得分:2)

Rails 4

# config/application.rb
config.assets.paths << Rails.root.join("app", "assets", "fonts")
config.assets.precompile += %w(.svg .eot .woff .ttf)

# app/assets/stylesheets/foundation-icons.css.scss
@font-face {
  font-family: "foundation-icons";
  src: asset-url("foundation-icons.eot");
  src: asset-url("foundation-icons.eot?#iefix") format("embedded-opentype"),
       asset-url("foundation-icons.woff") format("woff"),
       asset-url("foundation-icons.ttf") format("truetype"),
       asset-url("foundation-icons.svg#fontcustom") format("svg");
  font-weight: normal;
  font-style: normal;
}

答案 6 :(得分:2)

您实际上不必更改预编译正则表达式或资产路径。 尝试运行rake资产:在提交到Heroku之前在生产模式下进行预编译。

rake assets:precompile RAILS_ENV=production

并确保使用asset_path辅助方法在css文件中引用您的资源。

像:

src: font-url('<%= asset_path("foundation-icons.eot")%>');

答案 7 :(得分:1)

  1. .css 文件重命名为 .css.erb
  2. 将所有url('/assets/icomoon.eot')替换为url(<%= asset_path 'icomoon.eot' %>)
  3. 您可以通过将css文件转换为SASS / SCSS并使用font-url()帮助程序而不是url()来获得相同的结果。

    我已经尝试过使用Rails 4,即使没有添加到production.rb / application.rb中的位也可以使用它。

答案 8 :(得分:1)

您无需在/assets/fonts/中加入config.assets.paths目录。根据文档,app/assetslib/assetsvendor/assets中包含的所有目录都会自动加载。

http://guides.rubyonrails.org/asset_pipeline.html#asset-organization

  

管道资产可以放置在三个位置之一的应用程序内:app/assetslib/assetsvendor/assets

     

[...]

     

除标准assets/*路径外,还可以在config/application.rb中的管道中添加其他(完全限定的)路径。

     
    

config.assets.paths << Rails.root.join("lib", "videoplayer", "flash")

  

尝试在控制台中运行Rails.application.class.config.assets.paths,您将在/assets内看到所有目录的数组。如果您添加另一个目录并重新启动控制台,它将自动包含在阵列中,内容将作为资产提供。

您甚至不需要config.assets.precompile += %w( .svg .eot .woff .ttf ),因为所有非js-css文件都已通过默认匹配器Proc包含在内。

http://guides.rubyonrails.org/asset_pipeline.html#precompiling-assets

  

编译文件的默认匹配器包括application.js,application.css和所有非JS / CSS文件(这将自动包含所有图像资源):

     
    

[ Proc.new { |path| !%w(.js .css).include?(File.extname(path)) }, /application.(css|js)$/ ]

  

尝试仅在app/assets/中添加fonts目录,将所有配置保留为默认值,并在heroku上部署您的应用。

答案 9 :(得分:0)

尝试了上述所有方法后,没有一种对我有用,但这就是我解决字体问题的方式。如果字体在开发模式下工作,则只需

config.assets.compile = true

config\environments\production.rb

答案 10 :(得分:0)

有两种方法可以解决此问题。

  1. 您可以直接将字体文件放在公共目录中,并在CSS文件中添加路径,例如/ fonts / font-name
  2. 在config / initializers / assets.rb文件中添加行Rails.application.config.assets.compile = true