@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"
![WOFF MIME Type Screenshot]()
Надеюсь, что это спасет кого-то 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 сможет отображать ваш шрифт последовательно.