多个@font-face 在 IE9–11 或 Firefox 中不起作用答案

【问题标题】：Multiple @font-face not working in IE9–11 or Firefox多个@font-face 在 IE9–11 或 Firefox 中不起作用
【发布时间】：2014-04-15 15:31:57
【问题描述】：

我有一个使用四种外部字体的网站正在开发中。 Trajan 和 Museo 通过 Typekit 运行良好，但我的另外两个（Marketing Script 和 Socialico）在 IE9-11 和 Firefox 中遇到了问题。我已经尝试了各种路径更改和技巧来让它们显示，但他们坚定不移地不会。

测试站点http://www.wwva.org.php53-14.ord1-1.websitetestlink.com/students（您可能需要全屏才能看到左侧栏中的 Socialico）。

我目前包含一个使用 CSS @import 的辅助样式表。我也尝试在 style.css 文件的顶部直接包含 @font-face 声明，结果相同。 @font-face 声明如下所示（已验证相对路径）：

@font-face {
  font-family: 'Socialico';
  src: url('socialico-webfont.eot'); /* IE9 Compat Modes */
  src: local("☺"),
       url('socialico-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('socialico-webfont.woff') format('woff'), /* Modern Browsers */
       url('socialico-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('socialico-webfont.svg#Socialico') format('svg'); /* Legacy iOS */
     }

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

我已经对 StackOverflow 进行了一些挖掘，但我肯定有可能遗漏了什么。我没有对 Firefox 进行任何权限/配置更改，因为这只会在本地解决问题，而一旦网站上线，其他查看者将无法解决。

提前致谢！

【问题讨论】：

Socialico 对我来说很好。（Fx 27.0.1/Win7。）在您使用marketingScript 的页面上找不到任何位置；我假设如果不使用，浏览器不会下载字体。
我确实在#flagText（横幅中的大词）上使用了marketingScript。就我而言，很好地抓住了 Socialico 错误。另外，请参阅我对自己问题的回答。我在我的 CSS 中实际调用 marketingScript 时犯了一个简单的语法错误（忘记了逗号）。感谢您花时间研究这个问题——很抱歉浪费您的时间！

标签： css internet-explorer firefox fonts font-face

【解决方案1】：

Firefox 有一个首选项 (security.csp.enable) 转到您网站的 .htaccess 并禁用 CSP

由于您在此编辑之前对此进行了测试，因此您几乎可以使用两种替代解决方案。我认为该字体的制造商可能并未使其支持所有浏览器。博客中有很多关于字体无法在 FF 或 IE Edge 中呈现的讨论>

这就是我要做的：

用图像替换它。
使用 Cufon.js

无论哪种方式，您都是安全的，因为我们并不是在谈论一个段落。就一个字。

希望对你有所帮助

【讨论】：

我不太确定需要在我的 .htaccess 文件中添加什么来禁用 CSP，即使我这样做了，我也无权在开发服务器上重新启动 apache。我尝试在 Firefox 的 about:config 中禁用它，但无济于事。这会完成同样的事情吗？
不一样。但是，您仍然可以通过其他两种方式进行此操作。我会重新编辑答案。
我也尝试过编辑我的 .htaccess 文件，但它确实破坏了站点范围内的字体支持。当然，这并没有重启 apache，但并不是特别有希望。感谢上述编辑。由于标题是动态生成的，因此不能选择用图像替换。看起来我可能需要走 Cufon.js 路线。非常感谢您的反馈！
啊。刚找到。我的 CSS 中其他地方的简单语法错误。为那些好奇的人发布另一个答案。很抱歉浪费了您的时间，感谢您在提供选项方面的帮助！

【解决方案2】：

天哪，我觉得自己像个笨蛋。我已经对@font-face 代码进行了很多次搜索，以至于我变得专注于它，而显然忽略了应用代码的实际调用。我在主要和次要 font-face 值之间省略了一个逗号，由于语法错误而产生了不一致的结果。

让人们知道 - 校对一个人的所有代码总是一个好主意。

很抱歉浪费了您的时间！

【讨论】：

【解决方案3】：

我遇到了这个问题。原来我在字体系列声明中遗漏了一个逗号。例如

破碎：

body {
   font-family: 'Custom-Font' Helvetica, sans-serif;
}

作品：

body {
   font-family: 'Custom-Font', Helvetica, sans-serif;
}

【讨论】：