将@font-face 与 Rails 3.1 应用程序一起使用？答案

【问题标题】：Using @font-face with Rails 3.1 app?将@font-face 与 Rails 3.1 应用程序一起使用？
【发布时间】：2011-12-19 20:54:50
【问题描述】：

我在使用以下 @font-face 声明来处理我的 Rails 3.1 应用程序时遇到问题。我将资产管道中的字体与images 和stylesheets 和javascripts 一起放在自己的名为“Fonts”的文件夹中

这是我使用的声明（由 Font Squirrel 生成。）

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

有人在他们的 Rails 3.1 应用上成功使用了@font-face 吗？

更新

我刚刚阅读了这个帖子http://spin.atomicobject.com/2011/09/26/serving-fonts-in-rails-3-1/，它说在声明中将url 更改为font-url。不幸的是，这似乎也不起作用。

【问题讨论】：

标签： css ruby-on-rails-3.1 font-face sass

【解决方案1】：

您必须将文件夹添加到资产路径（文件config/application.rb），请参阅Rails Guides

config.assets.paths << "#{Rails.root}/app/assets/fonts"

您应该使用asset_path 助手：

src: url('<%= asset_path('Chunkfive-webfont.eot') %>');

【讨论】：

感谢文档。但是仍然不起作用:(我想知道我是否还缺少其他东西
我刚看到一个大写/小写问题，你拼写了 Fonts 和 I fonts。你应该在你的样式表中使用asset_path，更新我的帖子
生成的样式表部分现在是什么样子的？
“...unkfive-webfont”之后的无效 CSS：预期为“)”，为“.eot') %>');”
你在使用 erb 扩展吗？ style.scss.erb

【解决方案2】：

我知道这是一个老问题，但我只是在 rails 3.2 中偶然发现了这个问题，并且在阅读了之前发布的文档的链接之后，无需编辑 application.rb。我需要做的就是在我的样式表中执行以下操作（使用 sass）

@font-face {
    font: {
       family: 'Junction';
       weight: 'normal';
       style: 'normal';
    }
    src: asset-url('Junction-webfont.eot', font);
    src: asset-url('Junction-webfont.eot', font) format('embedded-opentype'),
         asset-url('Junction-webfont.woff', font) format('woff'),
         asset-url('Junction-webfont.ttf', font) format('truetype'),
         asset-url('Junction-webfont.svg#JunctionRegular', font) format('svg')
}

所以我没有使用 url，而是使用了通用的资产 URL，它有 2 个参数，文件和资产类，在本例中为“字体”。

【讨论】：

你把字体放在哪里了？
字体资源进入 app/assets/fonts/。然后将其添加到 config/application.rb 中的 Application 类：config.assets.paths << "#{Rails.root}/app/assets/fonts"。然后这个答案很好用，即使在 Rails 3.2 中
谢谢@DanMundy。 config.asset.paths + asset-url 组合在 Rails v3.2.10 中工作。
升级到3.2.11！ 3.2.10 中有一个相当大的安全漏洞。

【解决方案3】：

从 Rails 3.1 及更高版本开始，您可以直接调用 font-url。像这样：

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

希望您的最终 css 看起来像这样：

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

通常有效:)

【讨论】：

这是 Rail 资产管道的正确答案。确保您的 CSS 文件命名为 .css.scss，以便 font-url 帮助程序能够正常工作。
这就是答案。就像@scarver2 所说，font-url 仅适用于 SASS 或 LESS 文件。请参阅stackoverflow.com/a/10907276/165673 了解更多信息。
还要确保scaffold.css.scss没有用它的字体声明覆盖东西。

【解决方案4】：

使用 Rails 4.0（不知道这是否特定于 4，但无论如何），我只能使用 url(font_path('font-name.ttf'))。也不需要将字体路径添加到资产路径 (~~config.assets.paths << "#{Rails.root}/app/assets/fonts"~~)。

所以，对我来说，这是有效的：

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

【讨论】：

根据我使用 Rails 4 的经验，您可以简单地将 font-url 用于“url”，但请确保文件的扩展名是：.css.scss，否则解析 font-url 将不起作用.编辑：见下面的帖子，已经解释过了。

【解决方案5】：

我刚刚在 Atomic Object 的 Spin 博客上更新了那篇文章。这是转换后的 CSS（您正在查看 Sass 语法）

@font-face {
  font-family: "Merriweather";
  src: url(/assets/merriweather-black-webfont.eot);
  src: local("Merriweather Heavy"), local("Merriweather-Heavy"), url(/assets/merriweather-black-webfont.eot?#iefix) format("embedded-opentype"), url(/assets/merriweather-black-webfont.woff) format("woff"), url(/assets/merriweather-black-webfont.ttf) format("truetype"), url(/assets/merriweather-black-webfont.svg#MerriweatherHeavy) format("svg");
  font-weight: 900;
  font-style: normal;
}

【讨论】：

我正在使用 .scss 。嗯……奇怪
本地是检查他们的机器上是否有字体。

【解决方案6】：

我正在使用 3.1.1 并将我的字体放在 vendor/assets/store 下（Spree 实现）。这里给出的解决方案对我不起作用，我最终只是尝试了最终成为我的解决方案 - 不需要

这是我的 EOT 的 src 属性示例：

src: url('1617A5_4.eot');

我对此有点困惑，但似乎一旦编译资产，资产就会全部复制到它们的父文件夹 (assets/store/) 中，此时样式表可以将它们拾取。

【讨论】：

使用 Jared 的解决方案，它也对我有用。我只是忘记了每个字体文件 URL 的 store/ 前缀。并使用 font-url 助手，而不是 fonts-url。

【解决方案7】：

虽然已经晚了，但您可以使用 Compass 的 +font-face 混音来避免所有这些麻烦。 mixin 通过

帮助您的生活更轻松

不记得传统字体变体的可怕警告
它在内部为您处理 url_helper 和格式声明
更容易记住

女士们，先生们，声明如下：

+font-face("#{$font-name}",
  font-files("#{$font-name}.woff", woff, 
  "#{$fontFileName}.ttf", ttf, 
  "#{$fontFileName}.svg", svg), "#{$fontFileName}.eot", normal, normal);

【讨论】：