IE7（IETEster）中的@fontface无法正常工作

我使用Fontsquirrel.com的Sansumi @fontface工具包。它在IETester程序中的IE6和IE8中正常工作，但在IE7中却没有。IE7（IETEster）中的@fontface无法正常工作

我的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; 
}

来源

2011-08-24 Martin Huwa

IETester确实在很多地方失败。我已经注意到IETester上的IE7通常不稳定，并且还会崩溃。尝试使用IE collection。如果问题仍然存在，我会先安装一个运行IE7的虚拟机，并在假设代码出现问题之前对其进行测试。

UPDATE 你可以尝试改变顺序：

@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'); 
}

来源

2011-08-24 09:45:19 Ali

ie7在安装时灰显，当我尝试安装，即收集 –

我会尝试安装一个运行XP的虚拟机，然后安装IE收藏。我个人使用XP虚拟机来进行大部分IE测试。 – Ali

当我看着IE9的网络选项卡（在IE7模式），然后我看到有没有EOT文件加载，但在ie8和IE9 –

这可能是有点晚，但任何人谁仍然运行到这个问题 - 在一个星期天早上我一样还是剥开我的头发与传统的浏览器 - 我已经在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中也很棒！希望这可以帮助别人！

来源

2011-10-23 10:28:13

远离IEtester。这不是一个准确的模拟ie的渲染和脚本引擎。

来源

2011-10-23 10:33:22

@font-face Web字体在IETester的当前版本（example）的IE6/7/8中工作。

问题是，IE6/7/8 .eot解析器是越野车，并且不起作用，除非字体遵循一些special rules。

例如，字体名称必须以或等于姓。您可以使用Fontforge来编辑您的字体，并使用ttf2eot重新生成.eot文件，或者使用免费的在线webfont generator。

eot-good

那么你应该确保font-family在CSS字体家族名在.eot完全匹配。

来源

2014-10-28 13:13:06 rustyx

IE7（IETEster）中的@fontface无法正常工作

回答

相关问题