Question

我有一个使用四种外部字体的开发中的网站。 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进行任何权限/配置更改，因为这只会在本地解决问题，而不会在网站上线后解决其他查看者。

提前致谢！

Answer 1

Firefox有一个pref（security.csp.enable）转到您网站的.htaccess并停用CSP

由于您在此编辑之前对此进行了测试，因此您将获得两种替代解决方案。我认为该字体的制造商可能不会支持所有浏览器。博客中有很多关于FF或IE Edge＆gt;

中没有渲染的字体的喋喋不休

所以这就是我要做的事情：

将其替换为图像。
使用Cufon.js

无论哪种方式，你都会安全，因为我们并不是在谈论一个段落。这只是一个词。

希望能帮到你一些

Answer 2

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

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

我为浪费你的时间而道歉！

Answer 3

我有这个问题。事实证明我在font-family声明中缺少逗号。 E.g。

断裂：

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

使用：

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

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

3 个答案: