Heroku 上的 CSS 错误答案

【问题标题】：Error in CSS on HerokuHeroku 上的 CSS 错误
【发布时间】：2015-04-10 17:29:16
【问题描述】：

设计师给我发了以下css：

@font-face {
  font-family: 'Proxima';
  src: url('../fonts/ProximaNova-Reg-webfont.eot');
  src: local('☺'), url('../fonts/ProximaNova-Reg-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/ProximaNova-Reg-webfont.woff') format('woff'), url('../fonts/ProximaNova-Reg-webfont.ttf') format('truetype'), url('../fonts/ProximaNova-Reg-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

就我的问题而言，最重要的是以src: local 开头的最长行。这就是它在我的 style.css.scss 中的样子：

src: local('☺'), font_url('ProximaNova-Reg-webfont.eot?#iefix') format('embedded-opentype'), font_url('ProximaNova-Reg-webfont.woff') format('woff'), font_url('ProximaNova-Reg-webfont.ttf') format('truetype'), font_url('ProximaNova-Reg-webfont.svg') format('svg');

在本地一切正常，但是当我将项目推送到 heroku 时，出现以下错误：

 Sass::SyntaxError: Invalid CSS after "...4561e1481029429": expected ")", was ".eot?#iefix) fo..."

我不太擅长 CSS 来理解这段特殊的小代码的含义，但我猜设计师有理由把它放在那里。那么我必须做些什么才能使它工作以及为什么它在本地工作（在开发中）。这条线是干什么用的？也许我可以删除它？

【问题讨论】：

标签： css ruby-on-rails heroku

【解决方案1】：

这条线看起来很有趣，我会做些什么来避免这种情况：

安装 bourbon gem (https://github.com/thoughtbot/bourbon)
用@include font-face("Proxima", "../fonts/ProximaNova-Reg-webfont", normal, normal);替换这个css块

这个 Bourbon 的 mixin 将负责生成带有所有扩展的正确 css 代码，理想情况下这应该可以工作，只需确保您的字体路径。

【讨论】：

现在我刚刚删除了这一行，我猜波旁威士忌也不会生成它。一切似乎都在工作，但这条线肯定是有原因的。我猜这是非 unicode 货币符号。如果它是真的，那么我根本不需要它，但它有可能是为了一些真正有用的东西。看来，我别无他法，只能用谷歌搜索这条母线的含义:)

【解决方案2】：

所以我找到了那行的意思。这是一种 hack，它强制所有浏览器，尤其是 IE（诅咒它的创造者 11 代），下载字体而不是使用本地字体（即使它存在）。它有点慢，但消除了同名本地字体不同的可能性。所以我只是使用了一个不同的技巧（顺便说一下，据说更好）：

src: font_url('ProximaNova-Reg-webfont.eot?') format('eot'), font_url('ProximaNova-Reg-webfont.woff') format('woff'), font_url('ProximaNova-Reg-webfont.ttf') format('truetype'), url('ProximaNova-Reg-webfont.svg') format('svg');

而且，最重要的是，它有效:)

【讨论】：