@fontface в IE7 (IETEster) не работает должным образом

Question

Я использую комплект Sansumi @fontface от Fontsquirrel.com. Он работает правильно в IE6 и IE8 в программе IETester, но в 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;
}

Answer 1

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

Answer 2

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

Проблема в том, что в IE6 / 7/8 .eot парсер глючит и не работает, если шрифт не соответствует особым правилам .

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

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

Answer 3

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

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

Answer 4

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