Heroku字体资产不起作用

在app/assets/fonts放置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 helper在样式表和其他资源中使用它：

 |-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)$/ config.assets.precompile += %w( .svg .eot .woff .ttf ) config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/ 。

编辑 ：根据Heroku的文档，在运行assets:precompile时可能还需要添加RAILS_ENV=production assets:precompile rake任务。

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

如果它在assets/stylesheets也尝试删除scaffolds.css 。

Answer 5

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

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

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

将application.css文件重命名为application.css.scss并使用font-url和asset-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; } 

Answer 6

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

Answer 7

您不需要在config.assets.paths包含/assets/fonts/目录。 根据文档， app/assets ， lib/assets或vendor/assets中包含的所有目录都会自动加载。

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

管道资产可以放置在三个位置之一的应用程序内： app/assets ， lib/assets或vendor/assets 。

[…]

除了标准assets/*路径之外，还可以在config/application.rb中将其他（完全限定的）路径添加到管道中。

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

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

您甚至不需要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上部署您的应用程序。

Answer 8

1. 将.css文件重命名为.css.erb
2. 将所有url('/assets/icomoon.eot')替换为url(<%= asset_path 'icomoon.eot' %>)等。

您可以通过将css文件转换为SASS / SCSS并使用font-url() helper而不是url()来实现相同的结果。

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

Answer 9

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

 rake assets:precompile RAILS_ENV=production 

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

喜欢：

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