CSS Internet Explorer 11 和支持的网络字体

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23954877/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 02:31:16  来源:igfitidea点击:

Internet Explorer 11 and supported web fonts

cssinternet-explorerwebfontsfont-face

提问by Luke Puplett

I'm using a TTF and OTF web font to catch all major browsers(FireFox, Chrome and IE11) on most devices. It all looks fine, before relocation to the production server and then IE doesn't want to show my icons.

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

I guess, the brains in Redmond have some kind of feature to stop this working over the Internet, so it works from localhost only.

我猜,Redmond 的大脑有某种功能可以阻止它通过 Internet 工作,因此它只能从 localhost 工作。

What's the deal here? What kind of font type do I need to use for IE?

这里有什么交易?我需要为 IE 使用哪种字体类型?

回答by Rohit Suthar

This is the standard way of loading with @font-face, hacky fixes and all -

这是使用@font-face、hacky 修复和所有加载的标准方式 -

@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 */
    }

hey please check the Compatibility tables for support of EOT, check these links -

嘿,请检查兼容性表以支持 EOT,检查这些链接 -

Link 1

链接 1

Link 2

链接 2

回答by beliha

Be aware of one thing:
Fonts won't work in IE if the font-family entry in css is named differently than the font name! This bug took me all day to figure out and can be very frustrating if you are not aware of it!

请注意一件事:
如果 css 中的 font-family 条目的名称与字体名称不同,则字体将无法在 IE 中使用!这个错误花了我一整天的时间才弄明白,如果你不知道它会非常令人沮丧!

For IE 6-11, use EOT fonts, but be aware it is not supported by any other browser.

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

For IE >=9 & all other browsers, use woff fonts, as it has the widest support and the best compression, since it was designed specifically for the web.

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

as such:

像这样:

@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 */
}