IE 11“防弹”字体和后备字体不起作用答案

【问题标题】：IE 11 "bulletproof" font-face and fall back fonts not workingIE 11“防弹”字体和后备字体不起作用
【发布时间】：2014-01-30 00:10:14
【问题描述】：

我的 IE11 字体有问题。我使用了以下字体，它在 Chrome、Safari 和 Firefox 中运行良好，但在 IE 中却不行。

@font-face {
font-family: 'Avenir';
src: url('fonts/avenirnextltpro-mediumcn.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
src: url('fonts/avenirnextltpro-mediumcn.woff') format('woff'), /* Modern Browsers */
     url('fonts/avenirnextltpro-mediumcn.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('fonts/avenirnextltpro-mediumcn.svg#svgFontName') format('svg') /* Legacy iOS */
}

所以我添加了一些后备

font-family: 'Avenir', 'Arial Narrow', 'sans-serif';

这实际上适用于我机器上的 IE 11，但不适用于同事的 IE 11。所以现在我真的很困惑。

我绝对不是这方面的老手，因此非常感谢任何建议！

【问题讨论】：

如果您按 F12，重新加载页面，然后查看 F12 工具的控制台选项卡，您是否看到任何错误消息？
是的，它说@font-face 未能通过 OpenType 嵌入权限检查。权限必须是可安装的。文件：avenirnextltpro-mediumcn.ttf。我应该删除 IE 的 .ttf 吗？
IE 不会使用 TTF 文件，除非在该字体中设置了“可安装”标志（通常不会，除非该字体被特别许可允许此类使用）。但是，WOFF 文件应该可以正常工作 - 您是否在网络工具中看到了该下载？
我看到了 .woff 文件，但结果为 404。
所以，您的第一步应该是将 WOFF 文件上传到正确的位置。如果文件在它应该在的位置，您需要配置您的网络服务器，以便它为该 MIME 类型提供服务（像 IIS 之类的某些服务器可能不提供服务器不知道的 MIME 类型的文件）。

标签： internet-explorer fonts font-face

【解决方案1】：

这是配置字体的绝佳资源。告诉它你想要的字体类型，什么样式，下载 zip，复制配置：

https://google-webfonts-helper.herokuapp.com/fonts

【讨论】：

【解决方案2】：

我不确定 IE 11 现在是否支持 .woff 等其他字体格式，但我最好的猜测是您应该为 IE9+ 添加另一种 .eot 字体，因为您只为 IE 版本 6-8 添加了 .eot 字体。见下文。

您的代码：

src: url('fonts/avenirnextltpro-mediumcn.eot?#iefix') format('embedded-opentype'); /** IE6-IE8 **/

尝试像这样更新它：

src: url('fonts/avenirnextltpro-mediumcn.eot'); /** IE9 Compat Modes **/
src: url('fonts/avenirnextltpro-mediumcn.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

【讨论】：