face sometimes works in Internet Explorer but not always
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.
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 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.
I'm at a loss. Please help.
Try these...
1. Check for DRM errors
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.
2. Check MIME type setup (again)
Make sure the mime-types match as answered here (the ones you listed do not): "Proper MIME type for fonts"
3. Assure the CSS name matches the name in the font file
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
4. Use the Google Webfont loader
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
链接地址: http://www.djcxy.com/p/46996.html上一篇: 面对Safari的字体MIME类型警告