我正在使用Fontsquirrel.com的Sansumi @fontface工具包。它在程序IETester中的IE6和IE8中正常工作,但在IE7中,它没有。
我的CSS代码如下所示:
@font-face {
font-family: 'SansumiExtraBoldRegular';
src: url('../fonts/Sansumi-ExtraBold-webfont.eot');
src: url('../fonts/Sansumi-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Sansumi-ExtraBold-webfont.woff') format('woff'),
url('../fonts/Sansumi-ExtraBold-webfont.ttf') format('truetype'),
url('../fonts/Sansumi-ExtraBold-webfont.svg#SansumiExtraBoldRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#block-system-main-menu {border-bottom: 1px solid #cecbcd;}
#navigation ul.menu {
list-style-type:none;
list-style:none;
/*overflow:hidden;*/
/*width:980px;*/
width:795px;
height:32px;
margin-top:0px;
margin-bottom:0px;
padding-left:0px;
margin-left:auto;
margin-right:auto;
}
#navigation li {
list-style:none;
list-style-type:none;
padding:0;
float:left;
display:inline;
height:32px;
}
/* style list as navigation using float:left */
/* set distance from left corner to the first li item */
#navigation ul.menu li:first-child {
/*margin-left:75px;*/
}
#navigation ul.menu li ul li:first-child {
margin-left:0px;
}
#navigation ul.menu li ul {
display:none; position:absolute; top:32px; margin:0px; padding:0; float:left; border:none; height:32px; max-height:32px; width: auto;
}
#navigation ul.menu li:hover ul {/*display:block;*/}
#navigation ul.menu li:hover ul li {height:32; padding-top:0px; position: relative; display:inline; background-image:none; float:left; }
#navigation ul.menu li a {
/*background-color:#ffffff; */
font: 9pt / 24pt 'SansumiRegular', Arial, sans-serif;
letter-spacing:1px;
text-decoration:none;
color: #666666;
height: 32px;
background-image:none;
font-weight:normal;
display:block;
padding-left:22px;
padding-right:22px;
margin-right:5px;
margin-left:5px;
float: left;
}
#navigation ul.menu li ul li a {
/*background-color:#ffffff; */
font: 9pt / 24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:none;
color: #666666;
height: 32px;
background-image:none;
font-weight:normal;
display:block;
float: left;
}
#navigation ul.menu li ul li a:hover, #navigation ul.menu li ul li.active-trail a.active-trail {
/*background-color:#ffffff; */
font: 9pt / 24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:underline;
color: #666666;
height: 32px;
font-weight:normal;
background-image:none;
display:block;
float: left;
}
#navigation ul.menu li a:hover {
font: 9pt / 24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:none;
color: #ffffff;
height: 32px;
background-image:url('../images/navi_active.png');
font-weight:normal;
background-position:center;
background-repeat:no-repeat;
}
#navigation ul.menu li a.active, #navigation ul.menu li.active-trail a.active-trail {
font: 9pt / 24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:none;
color: #ffffff;
font-weight:normal;
height: 32px;
background-image:url('../images/navi_active.png');
background-position:center;
background-repeat:no-repeat;
}
div.region-header ul.menu {
display:none;
}
答案 0 :(得分:1)
远离IEtester。它不是ie的渲染和脚本引擎的精确模拟。
答案 1 :(得分:0)
IETester确实在很多地方失败了。我注意到IETester上的IE7通常不稳定,也会崩溃。尝试使用IE collection。如果问题仍然存在,我会首先安装运行IE7的VM并在假设代码出现问题之前对其进行测试。
<强>更新强> 你能尝试改变顺序吗?
@font-face {
/* for IE */
font-family: 'SansumiExtraBoldRegular';
src: url('../fonts/Sansumi-ExtraBold-webfont.eot');
}
@font-face {
/* for other browsers */
font-family: 'SansumiExtraBoldRegular';
src: url('../fonts/Sansumi-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Sansumi-ExtraBold-webfont.woff') format('woff'),
url('../fonts/Sansumi-ExtraBold-webfont.ttf') format('truetype'),
url('../fonts/Sansumi-ExtraBold-webfont.svg#SansumiExtraBoldRegular') format('svg');
}
答案 2 :(得分:0)
这可能有点晚了,但是对于那些仍然遇到这个问题的人 - 就像我在星期天早上仍然用传统浏览器撕掉我的头发一样 - 我在IETester的IE6和IE7上测试过以下内容大。实际上,它与你拥有的马丁非常接近:
@font-face
{
font-family: "example-font-family";
src: url("./fonts-location/Font.eot");
src: url("./fonts-location/Font.eot?iefix") format("eot"),
url("./fonts-location/Font.ttf") format("truetype");
}
在Firefox中也很棒!希望这有助于某人!
答案 3 :(得分:0)
@font-face
网络字体在当前版本的IETester(example)的IE6 / 7/8中工作。
问题是IE6 / 7/8 .eot解析器是错误的,除非字体跟随某些special rules,否则不起作用。
例如,字体名称必须以系列名称开头或等于系列名称。您可以使用Fontforge修改字体,ttf2eot从中重新生成.eot,或者只使用免费在线webfont generator。
然后你应该确保CSS中的font-family
与.eot中的字体系列名称完全匹配。