21

放置的字体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 资产管道中使用字体

4

11 回答 11

31

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

于 2013-10-16T21:23:26.953 回答
13

根据收到的对此答案的评论（以及不必要的反对票），我将答案修改如下：

似乎 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 上工作，它就可以工作了。我怀疑你的路径不正确。也许尝试将您的字体目录移动到您的 /assets/stylesheets 文件夹:)

于 2013-10-13T21:03:01.240 回答
9

实际上，我只是尝试了此评论中提出的解决方案，并且效果很好。似乎您只需要更改预编译指令的正则表达式即可让 Heroku 正确找到资产。

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

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

于 2013-10-13T20:54:49.320 回答
3

导轨 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;
}
于 2014-08-13T05:37:22.343 回答
2

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

rake assets:precompile RAILS_ENV=production

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

喜欢：

src: font-url('<%= asset_path("foundation-icons.eot")%>');
于 2014-10-10T11:43:47.383 回答
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.

于 2013-10-12T05:20:44.303 回答
2

I solved the problem by using a combination of all the answers and comments. My example uses the Foundation Icon Fonts.

In your application.rb file add the following:

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

Rename your application.css file to application.css.scss and use the font-url and asset-path directives:

@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;
}
于 2014-04-04T21:33:04.153 回答
1
  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 的位，它也可以工作。

于 2013-10-17T09:31:02.247 回答
1

您不需要将/assets/fonts/目录包含在config.assets.paths. 根据文档，所有目录都包含在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。如果您添加另一个目录并重新启动控制台，它将自动包含在数组中，并且内容将作为资产提供。

您甚至不需要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/将所有配置保留为默认设置，然后在 heroku 上部署您的应用程序。

于 2013-10-18T08:12:06.750 回答
1

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

config.assets.compile = true

在

config\environments\production.rb
于 2018-12-24T22:49:03.837 回答
0

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

  1. 您可以直接将您的字体文件放在公共目录中，并在 CSS 文件中添加路径，例如 /fonts/font-name
  2. 在 config/initializers/assets.rb 文件中添加行 Rails.application.config.assets.compile = true
于 2019-11-07T06:18:20.970 回答