Мы используем 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-адреса на панели местоположений приводит к загрузке полного файла.
Включите аналогичную проблему, и с вашего скриншота выше ответ имеет заголовок Cache-Control "no-store". У IE, похоже, есть проблемы с кешированием и шрифтами.
Удаление заголовков "Cache-Control: no-store" и "Pragma: no-cache" помогло нам снова отобразить шрифты значков.
У меня была аналогичная проблема, и, похоже, у IE возникли сложности с некоторыми настройками display и position в сочетании с иконками.
Обычно он работает, используя:
element:before {
display:block;
position: absolute;
... your styles ...
}
Синтаксис верен, однако может возникнуть проблема с тем, какой конвертер вы использовали для преобразования из .tff в .eof. См. Эту статью для более подробной информации по этому вопросу вообще http://www.iandevlin.com/blog/2009/12/webdev/adventures-with-font-face
В то же время вы можете попробовать протестировать проблему, используя шрифт, размещенный в Google шрифтах. Я говорю об этом, потому что Google легко совместит кросс-браузер. Если выяснится, что шрифт Google работает, тогда вы знаете его проблему с тем, как ваш шрифт был преобразован, и вам нужно попробовать другой. Из того, что я понимаю, Font Squirrel действительно хорош при создании кросс-браузера совместимых шрифтов. Надеюсь, это поможет удачи.
Я столкнулся с подобной проблемой, но с иконками шрифта Bootstrap (Glyphicons). Вы можете попробовать, если это работает:
(Обычно в Windows 10) настройки IE-11 были изменены, чтобы не загружать внешние шрифты и использовать только шрифты, доступные в окнах. Это поведение по умолчанию.
Однако мы можем изменить этот параметр в IE, чтобы он мог загружать внешние шрифты. Ниже приведены шаги, которые необходимо предпринять в 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).Content-Type: text/plain для обычных типов шрифтов (eot, woff, woff2). См. этот ответ для правильного использования типов контента.display: block или display: inline-block для вашего элемента значка.