@font-face 让 IE8 崩溃

2022-01-12 00:00:00 fonts crash css internet-explorer-8 font-face

我刚刚通过 @font-face 在我的网站上安装了字体 Aller Regular 和 Aller bold(由 fontsquirrel.com).

I just installed the fonts Aller Regular and Aller bold on my site via @font-face (generated by fontsquirrel.com).

这是 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;

}

当我在 Firefox 中使用以太字体时，这工作正常，但是当我使用 IE8 时，网页崩溃尝试重新打开并再次崩溃.可以在 http://rcnhca.org.uk/sites/first_steps/

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?

推荐答案

我前段时间也遇到了同样的问题，经过调试发现crash是因为@font-face(在我的例子中，它被包含在一个名为 fonts.css 的单独样式表中)在 <head> 中呈现.IE8 有这个问题，但是当我将渲染移到 <body> 内部时工作得很好.

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>.

试试这个:

<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>

如果浏览器比 IE8 更新，这会在您的脑海中呈现字体样式表.如果浏览器是 IE8，它会在你的 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.

注意:如果您支持 IE7 或更早版本，则可能需要调整条件注释.

Note: You may have to adjust the conditional comments if you're supporting IE7 or older.

相关文章