@font-face 让 IE8 崩溃

@font-face crashes IE8(@font-face 让 IE8 崩溃)
本文介绍了@font-face 让 IE8 崩溃的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

这篇关于@font-face 让 IE8 崩溃的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

wkhtmltopdf print-media-type uses @media print ONLY and ignores the rest(Wkhtmltopdf print-media-type仅使用@media print,而忽略其余内容)
Minify CSS with Node-sass(使用Node-Sass缩小CSS)
jsPDF cannot set font family(JsPDF无法设置字体系列)
How to rotate outer div not inner content(如何旋转外部div而不是内部内容)
how to apply css transform to child on parent hover(如何对父级悬停时的子级应用CSS变换)
Only transition a transform in css?(是否仅在css中转换转换?)