CSS @font-face не работает в ie

У меня есть следующий CSS, который работает в Firefox, но не в IE. Очевидно, что шрифты находятся в каталоге. Любые предложения?

@font-face {
    font-family: "Futura";
    src: url("../fonts/Futura_Medium_BT.eot"); /* IE */
    src: local("Futura"), url( "../fonts/Futura_Medium_BT.ttf" ) format("truetype"); /* non-IE */  
}

body nav {
    font-family: Futura,  Verdana, Arial, sans-serif;
    font-size:1.2em;
    height: 40px;
}

Ответы

Ответ 1

Я прочитал много учебников, которые предложили взломать, поэтому я придумал это решение, я думаю, что лучше... Кажется, он работает нормально.

@font-face { 
    font-family: MyFont; src: url('myfont.ttf'); 
}
@font-face{ 
    font-family: MyFont_IE; src: url('myfont.eot'); 
}
.my_font{ 
    font-family: MyFont, MyFont_IE, Arial, Helvetica, sans-serif; 
}

Ответ 2

Если у вас все еще есть проблемы с этим, вот ваше решение:

http://www.fontsquirrel.com/fontface/generator

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

Ответ 3

Для IE > 9 вы можете использовать следующее решение:

@font-face {
    font-family: OpenSansRegular;
    src: url('OpenSansRegular.ttf'), url('OpenSansRegular.eot');
}

Ответ 4

Вы можете использовать Google Font API. Говорят, что это работает от IE 6 и выше. (Я не тестировал это.)

Используется инфраструктура, обслуживающая Google уход за преобразованием шрифта в формат, совместимый с любыми современными браузера (включая Internet Explorer 6 и вверх),...

Ответ 5

От http://readableweb.com/mo-bulletproofer-font-face-css-syntax/

Теперь, когда веб-шрифты поддерживаются в Firefox 3.5 и 3.6, Интернет Explorer, Safari, Opera 10.5 и Chrome, веб-авторы сталкиваются с новыми Вопросы: Как отличаются эти реализации? Какие методы CSS будут вместить все? Разработчик Firefox Джон Даггет недавно опубликовал немного об этих проблемах и обходных решениях, которые исследовал. В ответ на эту должность и в ответ, в частности, Paul Irishs работает, я придумал следующий синтаксис CSS шрифта @font-face. Он был протестирован во всех вышеупомянутых браузерах, включая IE 8, 7, и 6. Пока что так хорошо. Следующая тестовая страница, которая объявляет бесплатный шрифт Droid как полноценный семейство шрифтов с Regular, Italic, Bold, и Полужирный курсив. Подробнее см. Источник. Предупреждение: имейте в виду, что Readable Web выпустила свое первое программное обеспечение, связанное с шрифтом @font-face утилита для создания изначально сжатых EOT файлов быстро и легко. Он имеет собственный веб-сайт и, помимо самой утилиты, пакет загрузки содержит полезную документацию, тестовый шрифт и EOT. Его называют EOTFAST Если вы работаете с @font-face, его необходимо.

Heres The Mo Bulletproofer Code:

@font-face{ /* for IE */
    font-family:FishyFont;
    src:url(fishy.eot);
}
@font-face { /* for non-IE */
    font-family:FishyFont;
    src:url(http://:/) format("No-IE-404"),url(fishy.ttf) format("truetype");
}

Ответ 6

Font Squirrel не работает для меня. Я загрузил шрифт для преобразования в несколько форматов шрифтов для поддержки IE. Он выполнил onversion, который я смог загрузить. Затем я загрузил контент на свой сервер по спецификациям. Я только мог либо получить Firefox, либо IE, но не оба. Решением, которое работало для меня, была ссылка Mo Bullet Proofer выше.

Ответ 7

Я обнаружил, что объявления лица шрифта находятся внутри IE запроса мультимедиа (оба края и 11) не загружают их; они должны быть первыми, объявленными в таблице стилей и не завернутыми в медиа-запрос

Ответ 8

Измените ниже

@font-face {
    font-family: "Futura";
    src: url("../fonts/Futura_Medium_BT.eot"); /* IE */
    src: local("Futura"), url( "../fonts/Futura_Medium_BT.ttf" ) format("truetype"); /* non-IE */  
}

body nav {
     font-family: "Futura";
    font-size:1.2em;
    height: 40px;
}