2010-12-05 4 views
3

これはFontSquirrelから生成されたコードで、他のすべてのブラウザ(IEを含む)でうまく動作しますが、強力なFirefoxはありません!私は間違って何をしていますか?@ font-faceがFirefoxで動作しないのですか?

(PS-Iは、FF3.5を使用しています)

あなたは私の例を見ることができない場合は、こちらのソースです:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="robots" content="noindex, nofollow" /> 
<title>Fonts Firefox test</title> 

<style type="text/css"> 
/*********** CHEVIN @font-faces **********/ 
@font-face { 
font-family: ChevinLight; 
src: url(uploads/fonts/chevilig-webfont.ttf); 
font-weight: normal; 
font-style: normal; 
} 
@font-face { 
font-family: ChevinBold; 
src: url(uploads/fonts/chevibol-webfont.ttf); 
font-weight: normal; 
font-style: normal; 
} 
@font-face { 
font-family: ChevinExbold; 
src: url(uploads/fonts/cheviextbol-webfont.ttf); 
font-weight: normal; 
font-style: normal; 
} 

/*********** @font-faces FOR IE **********/ 
@font-face { 
font-family: ChevinLight; 
src: url(uploads/fonts/chevilig-webfont.eot); 
} 
@font-face { 
font-family: ChevinBold; 
src: url(uploads/fonts/chevibol-webfont.eot); 
} 
@font-face { 
font-family: ChevinExbold; 
src: url(uploads/fonts/cheviextbol-webfont.eot); 
} 

/* Styles */ 
h1 { 
font-family: ChevinLight, Arial, Helvetica, sans-serif; 
} 
h2 { 
font-family: ChevinBold, Arial, Helvetica, sans-serif; 
} 
p { 
font-family: ChevinExbold, Arial, Helvetica, sans-serif; 
} 

</style> 

</head> 
<body> 

<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum enim ante, nec convallis massa. Cras ac arcu mollis diam laoreet laoreet. Suspendisse leo metus, aliquam nec dapibus a, porttitor id nulla.</h1> 
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum enim ante, nec convallis massa. Cras ac arcu mollis diam laoreet laoreet. Suspendisse leo metus, aliquam nec dapibus a, porttitor id nulla.</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum enim ante, nec convallis massa. Cras ac arcu mollis diam laoreet laoreet. Suspendisse leo metus, aliquam nec dapibus a, porttitor id nulla.</p> 

</body> 
</html> 

ありがとう!

答えて

7

ファイヤービッグは、古い古いFoxyが*.eotバージョンを読み込もうとしていることを示していますが、愚かなようですが、単に最後の定義を読み込むだけです。

あなたはconditional commentとIEの一部をラップする必要があります。

<!--[if IE]> 
@font-face { 
font-family: ChevinLight; 
src: url(uploads/fonts/chevilig-webfont.eot); 
} 
@font-face { 
font-family: ChevinBold; 
src: url(uploads/fonts/chevibol-webfont.eot); 
} 
@font-face { 
font-family: ChevinExbold; 
src: url(uploads/fonts/cheviextbol-webfont.eot); 
} 
<![endif]--> 

その他の方法は、上部にIEの定義を置くことであろう。

いくつかのバグ:
https://bugzilla.mozilla.org/show_bug.cgi?id=472647 - どちらか.eot無視するか
https://bugzilla.mozilla.org/show_bug.cgi?id=520357それをサポート - "私たちはEOTをサポートしていませ(としません)を行う。" [原文]

をうん、いつものMozillaのunpropress。

+0

これはうまくいきました、ありがとうございます! – Karlgoldstraw

関連する問題