問題描述
我剛剛通過 @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 崩潰的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！