7

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

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

4

3 回答 3

9

不久前我遇到了同样的问题，经过一些调试后，我发现崩溃是因为@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 或更早版本，您可能需要调整条件注释。

于 2012-07-08T20:15:13.023 回答
4

IE8 似乎更喜欢双引号。这对我来说第一次加载时修复了无样式的文本，可能会为你修复崩溃。

感谢这里的人，它解决了我的问题：@font-face not embedding in IE8 and under

于 2012-05-24T22:46:47.863 回答
1

我有使用自定义字体的类似问题开发页面。IE8 崩溃了。我通过在任何其他字体声明之前放置 IE8 字体声明来修复它。IE：

<!-- Custom .eot fonts for IE8 -->
<!-- IE8 fonts should load before other font-face declarations to avoid IE8 crash  -->
<!--[if lt IE 9]>
  <link rel="stylesheet" href="/pub/stylesheets/fonts-ie8.css" />     
<![endif]-->

<!-- Custom .woff fonts -->
<link href="/pub/stylesheets/fonts.css" rel="stylesheet">
于 2014-03-18T09:06:54.297 回答