@ font-face在Firefox中不工作？ [英] @font-face not working in Firefox?
问题描述
这是从FontSquirrel生成的代码，在每个其他浏览器（包括IE），但不是强大的Firefox！我究竟做错了什么？
This is code generated from FontSquirrel, and working great in every other browser (including IE), but not the mighty Firefox! What am I doing wrong?
（ps-我正在使用FF3.5）
(ps- I am using FF3.5)
如果您无法查看我的示例，是来源：
If you can't view my example, here is the source:
<!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>
$ b
谢谢！
Thanks!
推荐答案
Firebug显示，好的老Foxy试图加载 *。eot 版本，似乎很愚蠢，但它只是加载最后一个定义。
Firebug shows that good old Foxy tries to load the *.eot versions, seems stupid but it simply loads the last definition.
您应该使用条件注释包装IE部分：
You should wrap the IE part with a conditional comment:
<!--[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定义放在顶部。
Other way would be to put the IE definitions at the top.
有些错误：
https://bugzilla.mozilla.org /show_bug.cgi?id=472647 - 忽略.eot或支持它
https://bugzilla.mozilla.org/show_bug.cgi?id=520357 - 我们不会（不会）支持EOT。[sic]
Some bugs:
https://bugzilla.mozilla.org/show_bug.cgi?id=472647 - Either ignore .eot or support it
https://bugzilla.mozilla.org/show_bug.cgi?id=520357 - "We do not (and will not) support EOT."[sic]
是的，通常的Mozilla unpropress。
Yeah, usual Mozilla unpropress.
这篇关于@ font-face在Firefox中不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
