@font-face игнорируется IE7

Я создал правило @font-face css и все форматы шрифтов, используя Font Squirrel, и прекрасно работает во всех браузерах, которые я тестировал до сих пор, но не в IE7. Кажется, шрифт вообще не загружается.

Вы можете увидеть сайт в прямом эфире на http://grupogamma.socialsnack.com/

Правила @ font-face находятся на http://grupogamma.socialsnack.com/wp-content/themes/gamma/style.css а шрифты - на http://grupogamma.socialsnack.com/fonts/

Мой фрагмент CSS, созданный Font Squirrel:

@font-face {
    font-family: 'UniversCondensedLight';
    src: url('/fonts/univers-condensedlight-webfont.eot');
    src: url('/fonts/univers-condensedlight-webfont.eot?#iefix') format('eot'),
         url('/fonts/univers-condensedlight-webfont.woff') format('woff'),
         url('/fonts/univers-condensedlight-webfont.ttf') format('truetype'),
         url('/fonts/univers-condensedlight-webfont.svg#webfonteM3WTEhs') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'UniversCondensed';
    src: url('/fonts/univers-condensed-webfont.eot');
    src: url('/fonts/univers-condensed-webfont.eot?#iefix') format('eot'),
         url('/fonts/univers-condensed-webfont.woff') format('woff'),
         url('/fonts/univers-condensed-webfont.ttf') format('truetype'),
         url('/fonts/univers-condensed-webfont.svg#webfontPDfnu2z9') format('svg');
    font-weight: normal;
    font-style: normal;

}

РЕДАКТИРОВАТЬ:

Используя Wireshark, я смог проверить, действительно ли загружен шрифт.eot, и возвращается 200 OK. Тип содержимого это application/vnd.ms-fontobject. Таким образом, шрифт загружен, но просто не используется / не отображается должным образом.

Источник

4 ответа

Решение

Кажется, что-то еще в моем css заставляло IE7 вести себя плохо (шок!)

К счастью, использование волшебной волшебной пыли (увеличение: 1) решило проблему.

Источник

Этот подход я только что работал с IE7 и IE8. И да. Объявление шрифтового лица для IE7 отличается, но проще, по сравнению с "много браузерным" способом объявления этого. Вот мой пример. Я добавил шрифты в папку "fonts", чтобы вы могли видеть некоторые "fonts/..", добавленные в код.

/* declaration of custom fontfaces */
/* first set of declaration fixes IE < v.9 issue */
@font-face { 
             font-family:"Open Sans Light";
             src:url("fonts/OpenSans-Light.eot?");
           }

/* if your browser is one of the latest ones, then it will recognize the code 
   below and will redeclare the font faces. 
   Since IE 7 and 8 do not recognize these declarations, 
   they will just bypass them. */
@font-face { 
             font-family:"Open Sans Light";
             src:url("fonts/OpenSans-Light.eot?") format("eot"),
                url("fonts/OpenSans-Light.woff") format("woff"),
                url("fonts/OpenSans-Light.ttf") format("truetype"),
                url("fonts/OpenSans-Light.svg#OpenSans-Light") format("svg");
             font-weight:normal;font-style:normal; 
           }
Источник

Я обнаружил, что мне нужно добавить расширение файла в IIS в тип MIME, как показано здесь http://technet.microsoft.com/en-us/library/bb742440.aspx

Источник

Я уверен, что это просто вопрос "IE7 не делай этого", как говорят дети. Ссылка Sitepoint на @font-faceнаходится по адресу http://reference.sitepoint.com/css/at-fontface и указывает, что IE поддерживает только определенные форматы шрифтов через @font-face,

Источник
Другие вопросы по тегам