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

Question

Я пытаюсь заставить Internet Explorer отображать мои красивые шрифты. Это не работает. Они отлично работают в Firefox, и я могу видеть в моих журналах доступа Apache, что IE вытащил шрифты. Таким образом, он анализирует CSS-тег font-face, но не отображает их.

Сайт, который я использовал для преобразования шрифтов, был: http://www.kirsle.net/wizards/ttf2eot.cgi. Я пробовал этот WEFT-инструмент от Microsoft, но он не работал должным образом. После установки и открытия он сказал: «Первый раз запустив его, сделайте это ...», затем он постоянно зависал.

Вот мой CSS:

@font-face
{
   font-family: 'HelveticaLTCN';
   src: url('HelveticaNeueLTCom-LtCn_0.eot');
   src: local('HelveticaNeuel TCom LtCn'), url('HelveticaNeueLTCom-LtCn_0.ttf') format('TrueType');
}

Есть идеи, почему IE не отображает шрифты?

РЕДАКТИРОВАТЬ: Следует также упомянуть, я звоню шрифт с:

p .mytext
{
   font-family: HelveticaLTCN;
}

Answer 1

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

Answer 2

Помните, что: .eot шрифты должны быть последними "src". Если нет, то IE перепишет конфиг и вылетит шрифт.

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

Answer 3

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

@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 вперед с использованием эмуляции.

Answer 4

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

Странный!

Answer 5

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 от других.

Answer 6

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

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

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

Цитаты не являются обязательными, насколько я знаю.

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

Answer 7

Вы можете конвертировать ваш шрифт 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 /

Answer 8

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

@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

Answer 9

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

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

Answer 10

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