CSS @ font-face有时可以在Internet Explorer中使用，但并非总是如此 [英] CSS @font-face sometimes works in Internet Explorer but not always

问题描述

我在Internet Explorer 11中使用Web字体时遇到麻烦.即使使用相同的浏览器，该字体对于使用IE11的某些用户也可以使用，但对其他用户不起作用.对于遇到问题的用户，Modernizr.fontface仍然返回true，因此我可以排除该问题.

I'm having trouble with with web fonts in Internet Explorer 11. The font(s) work for some users with IE11 but not others even though it's the same browser. Modernizr.fontface still returns true for the users experiencing the problem so I can rule that out.

下面是CSS ...

Below is the 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，但仍然没有用.

IE tries to render the ttf file and so I thought it might be a mime type issue. It was, partially: I updated the mime type to application/x-font-ttf which fixed it for at least one user but two others are still experiencing the issue. Then I tried adding a WOFF after the WOFF2 and that still didn't work.

我很茫然.请帮忙.

推荐答案

尝试一下...

IE 11字体和后退字体不起作用如果您按F12键，重新加载页面，然后查看"F12工具"的控制台"选项卡，您是否看到任何错误消息，例如"@ font-face失败的OpenType嵌入权限"查看."?如果这样做，字体上的DRM可能会出现问题，而IE 11会尊重而其他人不会.

IE 11 "bulletproof" font-face and fall back fonts not working If you hit F12, reload the page, and look at the F12 Tools' Console tab, do you see any error messages, such as "@font-face failed OpenType embedding permission check."? If you do, it is likely an issue with DRM on the font, which IE 11 respects and others do not.

请确保此处的MIME类型匹配(您列出的MIME类型不匹配):"

Make sure the mime-types match as answered here (the ones you listed do not): "Proper MIME type for fonts"

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

If that doesn't work, does the name declared as the font's name in CSS match the name stored in the file itself? http://www.experts-exchange.com/Web_Development/Blogs/WordPress/Q_28367854.html

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

If fixing the mime-types do not fix your issue, try using the google fonts webfont loader as described in this answer: https://stackoverflow.com/a/21289510/356550

这篇关于CSS @ font-face有时可以在Internet Explorer中使用，但并非总是如此的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！