这是从FontSquirrel生成的代码,在所有其他浏览器(包括IE)中都可以正常运行,但在强大的Firefox中却无法使用!我究竟做错了什么?

(ps-我正在使用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>


谢谢!

最佳答案

Firebug表明,好的老版本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放任自流。

10-06 08:24