当前位置 : 主页 > 网页制作 > css >

css – @ font-face无法在Firefox中运行?

来源:互联网 收集:自由互联 发布时间:2021-06-13
这是从FontSquirrel生成的代码,并且在其他所有浏览器(包括IE)中运行良好,但不是强大的Firefox!我究竟做错了什么? (ps-我使用的是FF3.5) 如果您无法查看我的示例,请参阅以下内容: !DOCTY
这是从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.”[sic]

是的,通常的Mozilla unpropress.

网友评论