2011-08-24 21 views
2

Я использую комплект Sansumi @fontface от Fontsquirrel.com. Он корректно работает в IE6 и IE8 в программе IETester, но в IE7 он не работает.@fontface в IE7 (IETEster) не работает должным образом

Мой 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

IETester терпит неудачу во многих местах. Я заметил, что IE7 на IETester, как правило, нестабилен и падает на меня. Попробуйте использовать 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'); 
} 
+0

ie7 greyed на установке, когда я пытаюсь установить ie collection –

+0

Я попытался бы настроить виртуальную машину с XP, а затем установить IE Collection на это. Лично я использую виртуальную машину XP для большей части моего тестирования IE. – Ali

+0

как я посмотрел на вкладку сети ie9 (в режиме ie7), тогда я увидел, что не было загруженных файлов eot, а в ie8 и ie9 –

0

Это может быть немного поздно, но для тех, кто все еще работает в этой проблеме - как я в воскресенье утром все еще рвет мои волосы с устаревшими браузерами. Я тестировал следующее на IE6 и IE7 в IETester, и он отлично работает. На самом деле, это действительно близко к тому, что у вас был Martin:

@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! Надеюсь, это поможет кому-то!

1

Держитесь подальше от IEtester. Это не точная имитация рендеринга, а также скриптовый движок.

0

@font-face web-шрифты работают в IE6/7/8 в текущей версии IETester (example).

Проблема в том, что синтаксический анализатор IE6/7/8 .eot является ошибкой и не работает, если шрифт не соответствует некоторому special rules.

Например, имя шрифта должны начинаться с или быть равным имени семьи. Вы можете использовать Fontforge, чтобы отредактировать свой шрифт и ttf2eot, чтобы повторно генерировать .eot или просто использовать бесплатный онлайн webfont generator.

eot-good

Тогда вы должны убедиться, что font-family в CSS точно совпадает с именем семейства шрифтов в .eot.

Смежные вопросы