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

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

Здесь наш @font-face:

@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-адреса на панели местоположений приводит к загрузке полного файла.

Ответ 1

Включите аналогичную проблему, и с вашего скриншота выше ответ имеет заголовок Cache-Control "no-store". У IE, похоже, есть проблемы с кешированием и шрифтами.

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

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

Ответ 2

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

Обычно он работает, используя:

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

Ответ 3

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

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

Ответ 4

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

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

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

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

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

Ответ 5

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

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