Internet Explorer @ font-face не работает

Если вы бросили полотенце или все еще боретесь с этим, я настоятельно рекомендую белочка шрифта. Он заменяет WEFT намного лучше, чем любой другой онлайн-генератор .eot. В качестве огромного бонуса он предоставляет все необходимые кросс-браузерные форматы в одном zip-файле вместе с рабочей страницей с образцом CSS + HTML. Это пока что ближе всего к @fontface nirvana.

Помните, что: шрифты .eot должны быть последними "src". В противном случае IE перепишет конфигурацию и выйдет из строя шрифт.

@font-face {
    font-family: "Aller Bold";
    src: url(fonts/Aller_Bd.ttf) format("truetype");
    src: url(fonts/Aller_Bd.eot);
}

Это сработало для меня:

@font-face {
    font-family : 'din-pro';
    src         : url('../fonts/din/DINPro-Medium.woff') format('woff');
    src         : url('../fonts/din/DINPro-Medium.otf') format('otf');
    src         : url('../fonts/din/DINPro-Medium.ttf') format('truetype');
    font-weight : 500;
    font-style  : normal;
}

@font-face {
    font-family : 'din-pro';
    src         : url('../fonts/din/DINPro-Regular.woff') format('woff');
    src         : url('../fonts/din/DINPro-Regular.woff2') format('woff2');
    src         : url('../fonts/din/DINPro-Regular.ttf') format('truetype');
    font-weight : 400;
    font-style  : normal;
}
@font-face {
    font-family : 'din-pro-ie';
    src         : url('../fonts/din/DINPro-Regular.eot?');
    font-weight : 400;
    font-style : normal;
}
@font-face {
    font-family : 'din-pro-ie';
    src         : url('../fonts/din/DINPro-Medium.eot?');
    font-weight : 500;
    font-style : normal;
}

Обратите внимание, что я определил шрифт для IE отдельно с суффиксом -ie. При использовании шрифта я бы сделал что-то вроде p { font-family : din-pro, din-pro-ie }. Протестировано и работает с IE5 с использованием эмуляции.

Internet Explorer немного запутался с другими определениями @ font-face. Ранее я обнаружил, что это очень помогает - http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Вкратце, они рекомендуют следующий способ. Единственное изменение - добавить вопросительный знак в конце URL-адреса шрифта. Странно, не правда ли?

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Перечислен ряд других альтернатив, а именно определение отдельных тегов @ font-face для файла EOT от других.

У меня были те же проблемы, с которыми сталкивались многие здесь. Проблема оказалась просто в том, что IE имеет более короткий лимит символов на значение font-family. Я дал своему семейству шрифтов более короткое имя, и, наконец, оно заработало с использованием CSS, который выплюнул белка шрифта.

Странный!

Одна вещь, которую вам нужно проверить, это

.css файл и .eot должны находиться в одной папке, если вы используете url ('HelveticaNeueLTCom-LtCn_0.eot')

или укажите полный путь URL-адреса, например src: url (http://www.example.com/path/to/url/Helvetica.eot)

Насколько я знаю, цитаты необязательны.

ps # Я уже давно встраиваю шрифт в свой блог, все работает нормально.

Лучшее определение для font-face:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Для меня сработало следующее объявление:

@font-face {
    font-family: 'Frutiger45LightBoldItalic';
    src: local('☺'), url('../font/frutiger-bolditalic-webfont.woff') format('woff'), url('../font/frutiger-bolditalic-webfont.ttf') format('truetype'), url('../font/frutiger-bolditalic-webfont.svg#webfontR2tDy7QH') format('svg'), url('../font/frutiger-bolditalic-webfont.eot');
}

Таким образом, есть только 1 атрибут src, и .eot находится в его конце, без вопросительного знака.

То, что я пробовал раньше, не сработало:

• размещение .eot в отдельной строке (до или после другого src)
• поставить вопросительный знак после .eot

Вы можете преобразовать свой TTF-шрифт в современные форматы (например, WOFF) с помощью Transfonter, а затем использовать сильный @ font-face нравится:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Источник: https://css-tricks.com/snippets/css/using-font-face/

IE не принимает шрифт, который включает строку формата в дескрипторе src - эта вторая строка src может быть виновником. Что произойдет, если вы удалите его (или удалите строку формата?)

Далее - иногда IE может немного педантично относиться к тому, используете ли вы кавычки вокруг значений в CSS. Попробуйте вместо этого font-family: "HelveticaLTCN"?

У меня была та же проблема, что и у панаса. Я преобразовал ttf в eot с помощью onlinefontconverter.com. Что ж, похоже, это была проблема: я просто попробовал fontsquirrel.com, как указал atsjr, и все работает нормально!

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

этот код может решить мою проблему в IE:

  @font-face {
      font-family: 'kurdish';
      src: url('font/zkurd_aras.eot?') format('eot'), url('font/zkurd_aras.woff') format('woff'), url('font/zkurd_aras.ttf') format('truetype');}

Всегда лучше направлять атрибут font-face локально, а не онлайн, например url ('../ fonts / font-name.eot'). IE и другие браузеры не «видят» шрифты, когда вы запускаете свою веб-страницу на локальном сервере.

Одна особенность IE заключается в том, что он требует, чтобы имя семейства шрифтов совпадало с именем, указанным в свойствах шрифта. В то время как Chrome и другие позволяют вам называть семейство шрифтов, как вы хотите, это не относится к IE.