css - @font-face crashes IE8

Question

Welcome To Ask or Share your Answers For Others

css - @font-face crashes IE8

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

css - @font-face crashes IE8

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

Here is the 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;

}

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T03:05:47+0000

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

Try this:

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

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.

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

Categories

css - @font-face crashes IE8

css - @font-face crashes IE8

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags