将@font-face 与 Rails 3.1 应用程序一起使用?

Posted

技术标签:

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

我在使用以下 @font-face 声明来处理我的 Rails 3.1 应用程序时遇到问题。我将资产管道中的字体与imagesstylesheetsjavascripts 一起放在自己的名为“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。不幸的是,这似乎也不起作用。

【问题讨论】:

【参考方案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 &lt;&lt; "#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 文件。请参阅***.com/a/10907276/165673 了解更多信息。 还要确保scaffold.css.scss没有用它的字体声明覆盖东西。【参考方案4】:

使用 Rails 4.0(不知道这是否特定于 4,但无论如何),我只能使用 url(font_path('font-name.ttf'))。也不需要将字体路径添加到资产路径 (config.assets.paths &lt;&lt; "#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);

【讨论】:

以上是关于将@font-face 与 Rails 3.1 应用程序一起使用?的主要内容,如果未能解决你的问题,请参考以下文章

使用 sencha touch 与 rails 3.1

如何将 jquery 插件添加到 rails 3.1

Ruby On Rails 3.1 中的尾随日志文件

针对 Rails 3.1+ 的 Jasmine 与 Mocha JavaScript 测试 [关闭]

如何在rails 3.1中使用jquery-addresspicker jquery

Ruby on Rails 4 中没有摘要的字体资源