css - @font-face 使 IE8 崩溃

标签 css fonts internet-explorer-8 crash font-face

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

这是 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 中使用 ether 字体时,这工作正常,但是当我使用 IE8 时,网页崩溃尝试重新打开并再次崩溃。可以在 http://rcnhca.org.uk/sites/first_steps/ 找到一个实例。

有谁知道是什么导致了这种疯狂?

最佳答案

我前段时间遇到了同样的问题,经过一些调试我发现崩溃是因为@font-face (在我的例子中,它作为一个名为 fonts.css 的单独样式表包含在内)在 <head> 中呈现。 . IE8 对此有问题,但当我将渲染移动到内部 <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,它只会在您体内呈现。

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

关于css - @font-face 使 IE8 崩溃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10294206/

相关文章:

html - 可折叠面板关闭时 Div 高度不为零

fonts - 在 pandoc 中设置字体以使用 MiKTeX 生成 pdf

objective-c - 如何使用 Apple Symbols 字体中的字形?

css - 条件 css 无法针对 IE

javascript - 当 DIV 从 IE8 中的光标下方移动时,悬停样式保持不变

css - 带有指向上次查看页面的链接的 float 按钮

css - SASS/SCSS 中的拆分变量

css - 如何居中 CSS 下拉菜单

fonts - 如何让 PhantomJS 呈现已安装的字体?

javascript - Font Awesome 图标在 IE8 中无法正确显示