我刚刚通过@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/