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

Question

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

Сайт:

bigwavedesign.co.uk / ССАГПЗ / ССАГПЗ /

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

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

У кого-нибудь есть идеи, почему это может происходить?

Ура!

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

EDIT

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

http://iamthomasbishop.com/

Answer 1

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

Обновление : С помощью некоторых хитростей мне удалось заставить его работать. Похоже, что IE9 использует .woff версию шрифта (которую я исключил) вместо .eot , что, как я думал, будет. Я использовал генератор @ font-face из 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;}

---

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

Answer 2

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

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

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

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

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

Answer 4

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.

Answer 5

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

@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";
}

Answer 6

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

Answer 7

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

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

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

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

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

Answer 8

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

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

Answer 9

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

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

Answer 10

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