Internet Explorer 11和支持的Web字体

Question

我在大多数设备上使用TTF和OTF网络字体来捕获所有主流浏览器(FireFox,Chrome和IE11).在重定位到生产服务器然后IE不想显示我的图标之前,它看起来都很好.

我想,雷德蒙德的大脑有一些功能可以阻止它在互联网上工作,所以它只能从localhost工作.

这是什么交易？我需要为IE使用哪种字体？

Answer 1

这是使用@ font-face,hacky fixes和all加载的标准方法 -

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

嘿,请查看兼容性表格以获得对EOT的支持,请查看以下链接 -

链接1

链接2

Answer 2

请注意一件事:
如果css中的font-family条目的名称与字体名称不同,则字体在IE中不起作用!这个错误让我整天想出来,如果你不了解它,可能会非常令人沮丧!

对于IE 6-11,请使用EOT字体,但请注意,任何其他浏览器都不支持它.

对于IE> = 9和所有其他浏览器,使用woff字体,因为它具有最广泛的支持和最佳压缩,因为它是专门为Web设计的.

因此:

@font-face {
    font-family: 'FontName';
    src: url('FontName.eot');  /* IE 9 - 11 */
    src: url('FontName.eot?#iefix') format('embedded-opentype'), /* IE Fix for IE 6-8*/
         url('FontName.woff') format('woff'); /* IE 9-11 & All Modern Browsers */
}