CSS Font Face 无法在 IE8 中按预期工作

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19151570/
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 00:35:11  来源:igfitidea点击:

Font Face not working in IE8 as expected

cssinternet-explorer-8font-face

提问by Imesh Chandrasiri

I've used the following code to get a custom font in my website! using the following code!

我使用以下代码在我的网站中获取自定义字体!使用以下代码!

@font-face{
     font-family:portagolTC;
     src: url(../font/PortagoITC_TT.woff?) format('woff');
     src: url(../font/PortagoITC_TT.eot?#iefix) format('opentype');
}

This works in chrome,ff,IE10,IE9 but not in IE8! What am I doing wrong here? Please correct me if I'm doing anything wrong.

这适用于 chrome,ff,IE10,IE9​​ 但不适用于 IE8!我在这里做错了什么?如果我做错了什么,请纠正我。

Note : I've googled and found few stackoverflow answers but nothing seems to solve my problem.

注意:我在谷歌上搜索并发现了一些 stackoverflow 的答案,但似乎没有什么能解决我的问题。

CSS3111: @font-face encountered unknown error. 
PortagoITC_TT.woff
CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
PortagoITC_TT.ttf
CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
PortagoITC_TT.ttf

回答by Mike Vranckx

If IE8 throws the CSS3111: @font-face encountered unknown error, you probably have the non-matching font-family nameproblem.

如果 IE8 抛出CSS3111: @font-face encountered unknown error,则可能是字体系列名称不匹配的问题。

To resolve this, you need to edit your font file, define identical names for Fontname, Family name and Name for humans and export your TTF. This can be done using the FontForgeapplication. Afterwards, you than again convert it for web (EOT, WOFF).

要解决此问题,您需要编辑字体文件,为字体名称、姓氏和人类名称定义相同的名称并导出您的 TTF。这可以使用FontForge应用程序来完成。之后,您再将其转换为网络(EOT、WOFF)。

More info: http://fontface.codeandmore.com/blog/ie-7-8-error-with-eot-css3111/

更多信息:http: //fontface.codeandmore.com/blog/ie-7-8-error-with-eot-css3111/

Update

更新

Made it working by downloading an own version of the TTF font and converted it for web. The CSS I used:

通过下载自己版本的 TTF 字体并将其转换为网络,使其工作。我使用的 CSS:

@font-face {
    font-family: 'portagoitc-tt';
    src: url('fonts/portagoitc-tt.eot');
    src: url('fonts/portagoitc-tt.eot?iefix') format('opentype'),
         url('fonts/portagoitc-tt.woff') format('woff'),
         url('fonts/portagoitc-tt.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

回答by 2C-B

I had trouble with IE8 and had no console error messages. What solved my problem was to alter my @font-facecode slightly:

我在使用 IE8 时遇到了问题,并且没有控制台错误消息。解决我的问题是@font-face稍微改变我的代码:

Before:

前:

@font-face {
    font-family: "Hero";
    src: local("Hero"),
         url("../fonts/Hero.eot?"),
         url("../fonts/Hero.woff") format("woff"),
         url("../fonts/Hero.ttf") format("truetype"),
         url("../fonts/Hero.svg#Hero") format("svg");
    font-weight: normal;
    font-style: normal;
}

After:

后:

@font-face {
    font-family: "Hero";
    src: url("../fonts/Hero.eot"); /* this line made the difference */
    src: local("Hero"),
         url("../fonts/Hero.eot?"),
         url("../fonts/Hero.woff") format("woff"),
         url("../fonts/Hero.ttf") format("truetype"),
         url("../fonts/Hero.svg#Hero") format("svg");
    font-weight: normal;
    font-style: normal;
}

回答by Daniel

Although my company bought the font, all formats (eot, woff etc), I didnt got it to work in IE8 and IE10. I uploaded the ttf format to http://www.fontsquirrel.com/tools/webfont-generatorand got a 'webfont'?? version and now it works!!!

虽然我的公司购买了所有格式(eot、woff 等)的字体,但我没有让它在 IE8 和 IE10 中工作。我将 ttf 格式上传到http://www.fontsquirrel.com/tools/webfont-generator并得到了一个“webfont”??版本,现在可以使用了!!!

Should have watched the console sooner of IE, there is stated permiossion troubles.

应该早点看IE的控制台,有说明权限问题。