css - 多个@font-face 在 IE9–11 或 Firefox 中不工作

Question

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

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

我目前正在使用 CSS @import 添加辅助样式表。我也尝试将 @font-face 声明直接包含在 style.css 文件的顶部，结果相同。 @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 有一个首选项 (security.csp.enable) 转到您网站的 .htaccess 并禁用 CSP

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

所以这是我要做的:

1. 将其替换为图片。
2. 使用 Cufon.js

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

希望对你有所帮助