IE 11“防弹” font-face和回退字体不工作 [英] IE 11 "bulletproof" font-face and fall back fonts not working

问题描述

我在IE11中遇到了问题。我已经使用了下面的字体，在Chrome，Safari和Firefox中都能正常工作，但是不能在IE中使用。

  @ font-面对{
字体家庭：'Avenir'; 
 src：url（'fonts / avenirnextltpro-mediumcn.eot？#iefix'）format（'embedded-opentype'）; / * IE6-IE8 * / 
 src：url（'fonts / avenirnextltpro-mediumcn.woff'）格式（'woff'），/ *现代浏览器* / 
 url（'fonts / avenirnextltpro-mediumcn .ttf'）格式（'truetype'），/ * Safari，Android，iOS * / 
 url（'fonts / avenirnextltpro-mediumcn.svg＃svgFontName'）格式（'svg'）/ *传统iOS * / 
 
 
 
 
 
 $ b $ p 
 $ b $ p 
 
 
  font-family：'Avenir'，'Arial Narrow'，'sans-serif'; 
  
实际上IE 11在我的机器上工作，而不是在同事的IE 11上。所以，现在我真的很困惑。
 
 
 
我绝对不是一个老东家，所以任何建议都非常感谢！ 
 
解决方案
我不知道如果IE 11现在支持其他字体格式，如.woff，但我最好的猜测是，你应该添加另一个.eot字体为IE9 +，因为你只添加.eot字体为IE版本6-8。  
 
 
 您的代码：
 
 
  src：url（'fonts / avenirnextltpro-mediumcn.eot？#iefix'）format（'embedded-opentype'）; / ** IE6-IE8 ** / 
  
尝试并更新它：
  src：url（'fonts / avenirnextltpro-mediumcn.eot'）; / ** IE9兼容模式** / 
 src：url（'fonts / avenirnextltpro-mediumcn.eot？#iefix'）格式（'embedded-opentype'），/ * IE6-IE8 * / 
  
 
I am having problems with my fonts in IE11. I've used the following font-face which works fine in Chrome, Safari and Firefox but not in 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 */
}
So I added some fallbacks 
font-family: 'Avenir', 'Arial Narrow', 'sans-serif';
which actually work for IE 11 on my machine but not on a colleague's IE 11. So now I am really perplexed.


I'm definitely not an old pro at this stuff so any suggestions are greatly appreciated!
解决方案
I am not sure if IE 11 now supports other font formats like .woff but my best guess is that you should add another .eot font for IE9+ as you only added .eot font for IE versions 6-8. See below.

your code:
src: url('fonts/avenirnextltpro-mediumcn.eot?#iefix') format('embedded-opentype'); /** IE6-IE8 **/
try and update it like this:
src: url('fonts/avenirnextltpro-mediumcn.eot'); /** IE9 Compat Modes **/
src: url('fonts/avenirnextltpro-mediumcn.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */


                        
这篇关于IE 11“防弹” font-face和回退字体不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！