IE 11“防弹”字体和回退字体无法正常工作

Question

我在IE11中遇到了字体问题。我使用了以下font-face，在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上无法运行。所以现在我真的很困惑。

我对这方面的知识肯定不是老手，所以非常感谢任何建议！

- Holbrook Travel

---

如果你按下F12键，重新加载页面，并查看F12工具的控制台选项卡，你能否看到任何错误消息？ - EricLaw

是的，它说@font-face未通过OpenType嵌入权限检查。权限必须可安装。文件：avenirnextltpro-mediumcn.ttf。我应该为IE删除.ttf吗？ - Holbrook Travel

除非字体中的“可安装”标志被设置，否则IE不会使用TTF文件（除非该字体专门许可此类使用）。但是，WOFF文件应该可以正常工作-您是否在网络工具中看到了下载？ - EricLaw

我看到了.woff文件，但是它返回了404错误。 - Holbrook Travel

你的第一步应该是将WOFF文件上传到正确的位置。如果文件已经放在了正确的位置，那么你需要配置你的Web服务器，以便提供该MIME类型的文件（某些服务器如IIS可能不会提供未知于服务器的MIME类型的文件）。 - EricLaw

请前往以下网址设置服务器的正确 MIME 类型：https://dev59.com/6XE85IYBdhLWcg3wPBB8#10864297 - Mike Kormendy

Answer 1

这是一个配置字体的好资源。告诉它你想要什么类型的字体、什么样式，下载zip文件并复制配置即可。

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

- Eric Soyke

Answer 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 */

- md27