Значки шрифтов не загружаются в IE11

Question

Мы используем icomoon для наших знаковых шрифтов, и они отлично работают в Chrome и Firefox, но не отображаются в IE11 ... Иногда. Кажется, что он работает с загрузкой первой страницы, но не при последующих загрузках страниц. Очистка кеша, похоже, не сбрасывает его. Эта проблема может присутствовать в других версиях IE, сейчас мы просто фокусируемся на IE11.

Вот наш @ шрифт-лицо:

@font-face { 
font-family: 'icon'; 
src:url('fonts/icon.eot?-3q3vo5'); 
src:url('fonts/icon.eot?#iefix-3q3vo5') format('embedded-opentype'), 
    url('fonts/icon.woff?-3q3vo5') format('woff'), 
    url('fonts/icon.ttf?-3q3vo5') format('truetype'), 
    url('fonts/icon.svg?-3q3vo5#rezku') format('svg'); 
font-weight: normal; 
font-style: normal; 
} 

[class^="icon-"], [class*=" icon-"] { 
font-family: 'icon'; 
speak: none; 
font-style: normal; 
font-weight: normal; 
font-variant: normal; 
text-transform: none; 
line-height: 1; 

/* Better Font Rendering =========== */ 
-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale; 
} 
.icon-alphabet:before { 
content: "\e600"; 
} 
/* etc etc etc */ 

Но вот где он получает странно. Рассматривая инструменты разработчика, отправляется HTTP-запрос для шрифтов, но принимается только несколько сотен байт (возможно, только заголовки).

Но ответ HTTP перечисляет длину содержимого правильно, так как несколько килобайт.

Вкладка «Ответ тела» просто говорит: «Нет данных для просмотра.»

На скриншоте Network Panel вы можете увидеть, что Google Fonts не ведут себя так.

Вставка URL-адреса в строке местоположения приводит к загрузке всего файла.

Answer 1

Произошла аналогичная проблема, и с вашего скриншота выше ответ имеет заголовок Cache-Control «no-store». Кажется, что у IE проблемы с кешированием и шрифтами.

Удаление заголовков «Cache-Control: no-store» и «Pragma: no-cache» позволило нам снова отобразить шрифты значков.

https://github.com/FortAwesome/Font-Awesome/issues/6454

Answer 2

Синтаксис верен, однако может возникнуть проблема с тем, какой конвертер вы использовали для преобразования из .tff в .eof. См. Эту статью для получения более подробной информации по этому вопросу http://www.iandevlin.com/blog/2009/12/webdev/adventures-with-font-face

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

Answer 3

У меня была аналогичная проблема, и она, кажется, вызвано IE, имеющим трудности с определенными display и position настройки в сочетании с iconfonts.

Он должен, как правило, работают с помощью:

element:before { 
    display:block; 
    position: absolute; 
    ... your styles ... 
} 

Answer 4

я столкнулся с подобной проблемой, но с Bootstrap значками шрифта (Glyphicons). Вы можете попробовать, если это работает:

(Как правило, в Windows 10) были изменены настройки IE-11, чтобы не загружать внешние шрифты и использовать только шрифты, доступные в окнах. Это поведение по умолчанию.

Однако мы можем изменить этот параметр в IE, чтобы он мог загружать внешние шрифты.Ниже приведены шаги, которые должны быть приняты в IE- Перейти к: Настройки >> Свойства обозревателя >> Безопасность

Нажмите на «Интернет» (или любой другой зоны, которые вы можете использовать) >> «уровень пользовательского ...»
Далее в разделе «Настройки безопасности» - Включите «Загрузка шрифта». По умолчанию он будет отключен.

Обновить страницу

Answer 5

После исследования тот же самый вопрос, и пройдя через различные решения, размещенные в Интернете, я создал следующий список неисправностей, который охватывает наиболее вероятные причины:

1. шрифт загрузки отключены в IE, в разделе «Свойства обозревателя»/«Безопасность/Пользовательский уровень/Загрузка шрифтов» разрешено/отключено. Они могут быть отключены администратором сети, и в этом случае вы не сможете увидеть или изменить этот параметр.
2. Ваши HTTP-заголовки не позволяют IE хранить файл шрифта локально. Чтобы исправить, удалите любые заголовки Cache-Control: no-store, no-cache или Pragma: no-cache или любой заголовок Expires с датой в прошлом. Кроме того, заголовок Vary имеет свои трюки в IE, если установлено ничего, кроме Accept-Encoding, User-Agent, Host или Accept-Language тогда IE ничего не кэшировать, еслиETAG заголовок не также присутствует (см this MSDN blog post).
3. Вы не устанавливаете правильные типы MIME для загрузки шрифтов. Например, Jetty 9 будет устанавливать по умолчанию Content-Type: text/plain для обычных типов шрифтов (eot, woff, woff2). См. this answer для правильного использования типов содержимого.
4. Обязательно используйте display: block или display: inline-block для вашего элемента значок.
5. Наконец, убедитесь, что прошли через troubleshooting guide в FontAwesome.