@ font-face崩溃IE8 [英] @font-face crashes IE8
问题描述
我刚刚通过@ font-face（由 fontsquirrel.com 生成）在我的网站上安装了Aller Regular和Aller字体。
这里是CSS：
@font -face {
font-family：'AllerRegular';
src：url（'library / fonts / aller_rg-webfont.eot'）;
src：url（'library / fonts / aller_rg-webfont.eot？#iefix'）format（'embedded-opentype'），
url（'library / fonts / aller_rg-webfont.woff'）格式（'woff'），
url（'library / fonts / aller_rg-webfont.ttf'）format（'truetype'），
url（'library / fonts / aller_rg-webfont.svg＃AllerRegular '）format（'svg'）;
font-weight：normal;
font-style：normal;
}
@ font-face {
font-family：'AllerBold';
src：url（'aller_bd-webfont.eot'）;
src：url（'library / fonts / aller_bd-webfont.eot？#iefix'）format（'embedded-opentype'），
url（'library / fonts / aller_bd-webfont.woff'）格式（'woff'），
url（'library / fonts / aller_bd-webfont.ttf'）format（'truetype'），
url（'library / fonts / aller_bd-webfont.svg＃AllerBold '）format（'svg'）;
font-weight：normal;
font-style：normal;
}
这是工作正常，当我使用ether的字体firefox，但是当我使用IE8的网页崩溃尝试重新打开和崩溃再次。有关实时示例，请访问 http://rcnhca.org.uk/sites/first_steps/
有人知道是什么原因导致这种疯狂吗？
而在一些调试之后，我发现崩溃是因为 @ font-face （在我的例子中被包括作为一个单独的样式表称为fonts.css）是在< head> 中呈现。 IE8有一个问题，但工作正常，当我移动渲染到< body> 。
尝试：
< head>
<！ - [if gt IE 8]><！ - >
< link href =fonts.css =stylesheettype =text / css>
<！ - ><！[endif] - >
< / head>
< body>
<！ - [if IE 8]>
< link href =fonts.css =stylesheettype =text / css>
<！[endif] - >
<！ - 您的其他网页 - >
< / body>
如果浏览器比IE8更新，这会使字体样式表出现。如果浏览器是IE8，它只是在你的身体内。
注意：如果你支持IE7或更早版本，你可能需要调整条件注释。 p>
I just installed the fonts Aller Regular and Aller bold on my site via @font-face (generated by fontsquirrel.com).
Here is the CSS:
@font-face {
font-family: 'AllerRegular';
src: url('library/fonts/aller_rg-webfont.eot');
src: url('library/fonts/aller_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('library/fonts/aller_rg-webfont.woff') format('woff'),
url('library/fonts/aller_rg-webfont.ttf') format('truetype'),
url('library/fonts/aller_rg-webfont.svg#AllerRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'AllerBold';
src: url('aller_bd-webfont.eot');
src: url('library/fonts/aller_bd-webfont.eot?#iefix') format('embedded-opentype'),
url('library/fonts/aller_bd-webfont.woff') format('woff'),
url('library/fonts/aller_bd-webfont.ttf') format('truetype'),
url('library/fonts/aller_bd-webfont.svg#AllerBold') format('svg');
font-weight: normal;
font-style: normal;
}
This is working fine when I use ether of the fonts in firefox, however when I use IE8 the webpage crashes attempts to reopen and crashes again. A live example can be found at http://rcnhca.org.uk/sites/first_steps/
Does anyone know what's causing this madness?
I had the same problem a while ago, and after some debugging I found that the crash was because of the @font-face (which in my case was included as a separate stylesheet called fonts.css) was rendered inside <head>. IE8 has a problem with this, but works just fine when I moved the rendering to just inside <body>.
Try this:
<head>
<!--[if gt IE 8]><!-->
<link href="fonts.css" rel="stylesheet" type="text/css">
<!--><![endif]-->
</head>
<body>
<!--[if IE 8]>
<link href="fonts.css" rel="stylesheet" type="text/css">
<![endif]-->
<!-- The rest of your page here -->
</body>
This renders the fonts stylesheet within your head if the browser is newer than IE8. If the browser is IE8, it renders it just inside your body.
Note: You may have to adjust the conditional comments if you're supporting IE7 or older.
这篇关于@ font-face崩溃IE8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
