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

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

Ваше здоровье!

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

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

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

http://iamthomasbishop.com/


person DanC    schedule 05.01.2011    source источник


Ответы (12)


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

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

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

person Tobias    schedule 09.01.2011
comment
В итоге я использовал метатеги, чтобы заставить IE9 работать как IE8 только для этого эффекта. Не идеально, так как я теряю некоторые приятные эффекты CSS3, но лучше, чем ужасный рендеринг шрифтов, с которым я застрял! - person DanC; 10.01.2011
comment
ОБНОВИТЬ! Используя эту технику, я также получил IE9, отображающий @font-face, хотя, как ни странно, только тогда, когда все заключено в font_here вместо 'font_here', который у меня был изначально. Должно ли это иметь значение? Я сомневаюсь в этом, но следуйте макету точно так, как показано Тобиасом, и все должно работать нормально! - person DanC; 12.01.2011
comment
попробуйте это со смайликом, но без названия шрифта. семейство шрифтов: LucidaFax-полужирный; ... звучит глупо, но у меня работает... или посмотрите здесь: paulirish.com/2009/bulletproof-font-face-implementation-syntax - person slobodan; 21.02.2011
comment
файлы шрифтов довольно маленькие, и у вас действительно нет выбора, если вы хотите обслуживать все основные браузеры. - person Capagris; 24.02.2012
comment
@KisGabo, вы можете сделать это с гораздо меньшим количеством файлов шрифтов - посмотрите мой ответ и браузеры, в которых я его тестировал. Получилось за два. - person Chris Moschini; 10.06.2012
comment
это ломает мои шрифты для всех браузеров - person valerio0999; 04.04.2016

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

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

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

Снимок экрана типа WOFF MIME

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

person Richard Slater    schedule 02.03.2011
comment
Мы используем тот же тип MIME в IIS (application/octet-stream) для .eot и .ttf. Стоит отметить, что мы наблюдали широкую совместимость только с этими двумя форматами — остальные просто раздувались в CSS. - person Chris Moschini; 09.05.2012

Для нас хитрость заключалась в том, чтобы просто изменить формат файлов .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')
}
person Chris Moschini    schedule 19.05.2011
comment
Это сработало для меня. Я уже использовал правильный синтаксис, описанный Тобиасом, но мой шрифт по-прежнему не отображался в IE9. Затем я понял, что у меня нет объявленного формата для формата eot (точно так же, как в примере кода Тобиаса), поэтому я добавил то, что предложил здесь Крис, и это сработало как шарм. Спасибо! - person todd; 03.04.2012
comment
Это также сработало для меня. Я работал с FontAwesome, который не работал в IE 9. Просто измените формат .eot на встроенный открытый тип, как это сделал Крис. Крис, не могли бы вы объяснить, почему это решает проблему? - person Julian; 24.07.2012
comment
@Julian У меня нет для вас причин, почему IE9 хочет, чтобы это было прописано - я только что создал множество тестовых случаев с вариациями форматов и т. д. и тестировал, пока не нашел наименьший возможный тестовый пример, который все еще работал во всех основных браузерах. . Вуаля. - person Chris Moschini; 26.07.2012
comment
+1 простое изменение ('eot') на ('embedded-opentype') снова сделало мою жизнь идеальной, спасибо - person Paul Brown; 04.12.2012
comment
Да, в настоящее время я откладываю использование woff до тех пор, пока поддержка не улучшится — добавление его к вышеперечисленному только увеличивает раздувание CSS, чего мы пытаемся избежать. Но когда-нибудь. - person Chris Moschini; 09.04.2013

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

@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";
}
person Abalore    schedule 06.12.2011

Абалор +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.

person Дмитрий Погодаев    schedule 06.02.2012

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

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

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

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

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

person Gregg B    schedule 05.01.2011
comment
Извините за редактирование! Файл .eot находится в том же каталоге, что и css, как рекомендуется. Это может быть проблема типа пантомимы, хотя я не уверен на 100%, как исследовать этот тип проблемы. - person DanC; 05.01.2011
comment
Я уверен, что это не так - просто одна из вещей, которая пришла мне в голову. Моя другая мысль заключается в том, что это вопрос прав. Я нашел этот пост: readableweb.com/testing-shows- ie9-beta-greedy-for-web-fonts и, кажется, предполагает, что MS тестирует лицензирование при принятии решения о том, отображать шрифт или нет. Возможно, это могло бы объяснить несоответствие локального/серверного. Я признаю, что на данный момент я в замешательстве. - person Gregg B; 05.01.2011

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

person TheKing2    schedule 21.04.2011

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

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

person libbynotzoey    schedule 20.05.2013

Вам следует ознакомиться с этой записью в блоге. говорите о проблемах, с которыми вы сталкиваетесь, и он придумывает то, что он называет «пуленепробиваемым» заявлением @font-face.

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

person Harro    schedule 29.04.2011

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;
}
person RidingTheRails    schedule 10.10.2012

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

person user3819978    schedule 27.08.2014

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

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

person JayD3e    schedule 08.04.2016