@font-face работает в IE8, но не IE9

Как описано выше, у меня есть проблемы с @font-face, которые не отображаются в IE9, хотя он отображается в любом другом браузере, включая IE8 и ниже. Кроме того, при просмотре локально на моем компьютере IE9 отображает шрифт, а не только при полном проживании.

Сайт:

bigwavedesign.co.uk/gcc/gcc/

Используемый код:

    @font-face {
                font-family: 'LeagueGothicRegular';
                src: url('league_gothic_0-webfont.eot');
                src: local('League Gothic Regular'), url('league_gothic_0-webfont.woff') format('woff'), url('league_gothic_0-webfont.ttf') format('truetype'), url('league_gothic_0-webfont.svg#webfonta36nFpyE') format('svg');font-weight: normal;font-style: normal;
}

Любые идеи, почему это может произойти?

Ура!

=============================================

ИЗМЕНИТЬ

Я нашел следующий сайт, который отображает тот же шрифт ok в IE9, anyine, какие идеи он сделал?

http://iamthomasbishop.com/

Ответ 1

Нет ответа, просто подтверждение: у меня такая же проблема. Шрифт работает во всех других версиях IE, кроме IE9, как с использованием IETester, так и с оригинальным браузером. При изменении режима документа (F12 dev tools) работает шрифт. Не так, как бы мне хотелось.

Обновление. С некоторыми обманами мне удалось заставить его работать. Похоже, что IE9 использует .woff версию шрифта (который я исключил) над .eot, который, как я думал, будет. Я использовал @font-face generator из fontsquirrel чтобы получить все различные варианты шрифтов и включить их в мой проект, используя smileyface -local. Не нужно было изменять файл .htaccess. Теперь работает отлично и выглядит одинаково во всех версиях IE:

@font-face {
  font-family: "LucidaFax-bold";
  src: url("_font/LucidaFax-bold.eot");
  src: local("☺"),
  url("_font/LucidaFax-bold.woff") format("woff"),
  url("_font/LucidaFax-bold.ttf") format("truetype"),
  url("_font/LucidaFax-bold.svg#LucidaFax-bold") format("svg");
  }

h1 { font-family: "LucidaFax-bold", serif;}

(Я даже разозлился, используя знак "Тарквин" "Уилтон-Джонс" текст-тень, применяя такой же взгляд на версии IE как на остальную часть мира браузера. Старая школа? Отлично выглядит! Стоит ли это? Ну, многому научился.;)

Ответ 2

У меня была одна и та же проблема с веб-шрифтами, размещенными на сайте IIS7, как предложенная Grillz, проблема была до MIME-типов.

Я решил использовать "application/octet-stream" на основе ответов на вопрос Mime type для WOFF.

Откройте IIS и выберите сайт, на котором размещаются шрифты (должно быть одно и то же имя домена для IE9 и Firefox)
Дважды щелкните "Mime Types"
Нажмите "Добавить..." в верхнем правом углу.
В "Расширение имени файла:" введите ".woff"
В поле "Тип MIME:" введите "application/octet-stream"

Надеюсь, что это спасет кого-то 10 минут в будущем.

Ответ 3

Для нас трюк состоял в том, чтобы просто изменить формат файлов .eot, которые мы обслуживаем.

Работает в IE6-9, Firefox 3-4, Chrome, Safari, Android, iPhone.

@font-face {
    font-family: 'Museo';
    src: url('/ui/museo300.eot?') format('eot'),
         url('/ui/museo300.ttf')  format('truetype')
}

становится:

@font-face {
    font-family: 'Museo';
    src: url('/ui/museo300.eot?') format('embedded-opentype'),
         url('/ui/museo300.ttf')  format('truetype')
}

Ответ 4

Мое решение состоит в том, чтобы объявить два разных шрифта:

@font-face {
    font-family: "Dereza bold";
    src: local("Dereza bold"), url("../../assets/otf/dereza_bold.otf") format("opentype"); 
}

@font-face {
    font-family: "IE Dereza bold";
    src: url("../../assets/eot/dereza_bold.eot");
}

И затем:

.divclass {
  font-family: "Dereza bold", "IE Dereza bold";
}

Ответ 5

Abalore +1

Мое решение:

@font-face {
    font-family: "OfficinaSansBookSCC";
    src: url('font/OfficinaSansBookSCC.eot'); 
    src: url('font/OfficinaSansBookSCC.eot') format('embedded-opentype'), 
         url( 'font/OfficinaSansBookSCC.ttf' ) format("truetype");
}

работает в IE 7-9, chrome, opera, firefox.

первая строка, необходимая для IE 9, вторая для IE 7-8.

Ответ 6

Хорошо, так как вы отредактировали свой пост, ниже текст не будет ответом. Вы указываете на правильный каталог? Есть ли вероятность того, что это проблема типа mime с сервера?

=============================================== =====

Это может быть так:

Важно отметить, что ваш сайт должен отображать в документеMode 9, чтобы использовать новые функции, включенные в IE9 (включая все новые функции в IE9, а не только те, которые связаны с веб-шрифтами). Если вы ранее не слышали о документеMode, Microsoft собрала руководство, которое объясняет, что это такое и как вы можете использовать его на своем сайте.

из http://blog.typekit.com/2010/09/03/typekit-adds-experimental-support-for-ie9/

Ответ 7

В IE9 - F12 посмотрите на экране отладки, посмотрите, есть ли какие-либо ошибки CSS3117. Смотрите также: IE9 блокирует загрузку веб-шрифта кросс-оригинала

Ответ 8

Font Squirrel также предоставляет замечательный генераторный инструмент, который поможет вам создать набор шрифтов, который будет включать требуемые форматы, уже написанный CSS и даже демонстрационную страницу, чтобы увидеть, как все это используется, а также помочь с проблемами, с которыми вы можете столкнуться.

Было очень легко включить его вывод на мой сайт, и он отлично справился с этой проблемой.

Ответ 9

Вы должны проверить этот комментарий в блоге У Пола Ирландии есть несколько вещей, чтобы сказать о проблемах, с которыми вы сталкиваетесь, и он придумывает, что он называет "пуленепробиваемое" утверждение @font-face.

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Ответ 10

http://www.fontsquirrel.com использует это для своего образца CSS, который работал нормально для проекта, над которым я работал.

@font-face {
    font-family: 'QuicksandBook';
    src: url('/Quicksand_Book-webfont.eot');
    src: url('/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Quicksand_Book-webfont.woff') format('woff'),
         url('/Quicksand_Book-webfont.ttf') format('truetype'),
         url('/Quicksand_Book-webfont.svg#QuicksandBook') format('svg');
    font-weight: normal;
    font-style: normal;
}

Ответ 11

У меня была эта проблема. Оказывается, у меня отсутствовала запятая в объявлении семейства шрифтов.

Ответ 12

Я хотел добавить еще одну вещь, которая может пойти не так в этом сценарии. В IE9 есть правило, которое отбрасывает все объявления @font-face, которые невозможно кэшировать после первой загрузки. IE9 будет правильно использовать шрифт на первом дисплее, но при последующих обновлениях шрифт @font-face будет отключен. Я обнаружил это после закрытия моего браузера случайно, а затем снова открыл его, обнаружив, что мой шрифт работает таинственно, только чтобы перестать работать с одним обновлением позже.

Чтобы исправить это, вам просто нужно убедиться, что запрос, обслуживающий ваш шрифт, имеет заголовок ответа Cache-Control чего-то другого, кроме no-cache. Я бы рекомендовал установить его на max-age=3600. Это гарантирует, что ваш шрифт будет кэширован в течение часа. Затем IE9 сможет отображать ваш шрифт последовательно.