CSS @font-face 有时可以在 Internet Explorer 中使用，但并非总是如此

Question

我在使用 Internet Explorer 11 中的网络字体时遇到问题。该字体适用于使用 IE11 的某些用户，但对于其他用户则不适用，即使它是同一个浏览器。 Modernizr.fontface 仍然为遇到问题的用户返回 true，因此我可以排除这种情况。

下面是 CSS...

@font-face {
    font-family: 'Balthazar';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/fonts/Balthazar/Balthazar.eot'); /* IE9 Compat Modes */
    src: local('Balthazar Regular'), 
         local('Balthazar-Regular'),
         url('/assets/fonts/Balthazar/Balthazar.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/assets/fonts/Balthazar/Balthazar.woff2') format('woff2'), /* Modern Browsers */
         url('/assets/fonts/Balthazar/Balthazar.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/assets/fonts/Balthazar/Balthazar.svg#Balthazar-Regular') format('svg'); /* Legacy iOS */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

<remove fileExtension=".woff"/>
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
<remove fileExtension=".woff2"/>
<mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />
<remove fileExtension=".ttf"/>
<mimeMap fileExtension=".ttf" mimeType="application/x-font-ttf" />
<remove fileExtension=".eot"/>
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<remove fileExtension=".svg"/>
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<remove fileExtension=".svgz"/>
<mimeMap fileExtension=".svgz" mimeType="image/svg+xml" />

IE 尝试渲染 ttf 文件，所以我认为这可能是 mime 类型问题。部分原因是：我将 mime 类型更新为 application/x-font-ttf，它为至少一个用户修复了它，但另外两个用户仍然遇到这个问题。然后我尝试在 WOFF2 之后添加一个 WOFF，但仍然没有用。

我很茫然。请帮忙。

Answer 1

试试这些...

1。检查 DRM 错误

IE 11 "bulletproof" font-face and fall back fonts not working 如果您按 F12，重新加载页面，然后查看 F12 工具的控制台选项卡，您是否看到任何错误消息，例如“@font-face 未能通过 OpenType 嵌入权限检查。”？如果这样做，则可能是字体上的 DRM 存在问题，IE 11 尊重这一点，而其他版本则没有。

2。检查 MIME 类型设置（再次）

确保 mime 类型与此处回答的匹配（您列出的不匹配）：“Proper MIME type for fonts”

3。确保 CSS 名称与字体文件中的名称匹配

如果这不起作用，在 CSS 中声明为字体名称的名称是否与存储在文件本身中的名称匹配？ http://www.experts-exchange.com/Web_Development/Blogs/WordPress/Q_28367854.html

4。使用 Google Webfont 加载器

如果修复 mime 类型不能解决您的问题，请尝试使用 google 字体 webfont 加载器，如以下答案所述：https://stackoverflow.com/a/21289510/356550