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

Question

Как описано выше, у меня есть проблемы с @ 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; 
} 

Любой какие-либо идеи, почему это может происходить?

Cheers!

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

EDIT

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

http://iamthomasbishop.com/

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

---

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

Answer 2

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

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

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

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

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

Answer 3

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

Я решил использовать «приложение/октет-поток» на основе ответов на вопрос Mime type for WOFF.

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

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

Answer 4

В IE9 - F12 посмотрите на экран отладки, посмотрите, есть ли какие-либо ошибки CSS3117. Смотрите также: IE9 blocks download of cross-origin web font

Answer 5

Вы должны проверить this сообщение в блоге Paul Irish есть несколько вещей, чтобы сказать о проблемах вы встретив, и он приходит с тем, что он называет «пуленепробиваемым» @ шрифт-слойного заявление.

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

Answer 6

Для нас хитрость заключается в том, чтобы просто изменить формат на .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 7

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

@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 8

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, хром, Opera, FireFox.

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

Answer 9

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

Answer 10

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

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

Answer 11

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

Answer 12

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

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