@ font-face在Firefox中不起作用？
[英]@font-face not working in Firefox?
问题描述
This is code generated from FontSquirrel, and working great in every other browser (including IE), but not the mighty Firefox! 
这是从FontSquirrel生成的代码，并且在其他所有浏览器（包括IE）中运行良好，但不是强大的Firefox！ What am I doing wrong? 我究竟做错了什么？
(ps- I am using FF3.5) （ps-我使用的是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>
Thanks! 谢谢！
1 个解决方案
解决方案1
7 已采纳 2010-12-05 12:32:48
Firebug shows that good old Foxy tries to load the *.eot versions, seems stupid but it simply loads the last definition. Firebug表明好老的Foxy试图加载*.eot版本，看起来很愚蠢，但它只是加载了最后一个定义。
You should wrap the IE part with a 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]-->
Other way would be to put the IE definitions at the top. 其他方法是将IE定义放在顶部。
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=472647 - 忽略.eot或支持它
https://bugzilla.mozilla.org/show_bug.cgi?id=520357 - "We do not (and will not) support EOT."[sic] https://bugzilla.mozilla.org/show_bug.cgi?id=520357 - “我们不 （也不会）支持EOT。”[sic]
Yeah, usual Mozilla unpropress. 是的，通常的Mozilla unpropress。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.