将@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 应用程序时遇到问题。我将资产管道中的字体与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
。不幸的是,这似乎也不起作用。
【问题讨论】:
【参考方案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 文件。请参阅***.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);
【讨论】:
以上是关于将@font-face 与 Rails 3.1 应用程序一起使用?的主要内容,如果未能解决你的问题,请参考以下文章
针对 Rails 3.1+ 的 Jasmine 与 Mocha JavaScript 测试 [关闭]