Ресурс, не отображающий в IE 9

У меня есть веб-страница, на которой используется значок. Эта веб-страница отлично работает в Chrome, Firefox и Safari. Он отлично работает в Edge и IE 11. Однако мне также необходимо поддерживать IE 8, 9 и 10. Моя проблема в том, что в IE 8, 9 и, возможно, 10, значки не отображаются. Вы можете видеть проблему с этим Bootply. В этом случае у меня есть следующий код:Ресурс, не отображающий в IE 9

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css"> 

<div class="container"> 
    <ul class="list-inline"> 
    <li><a href="#"><span class="material-icons">alarm_on</span></a></li> 
    <li><a href="#"><span class="material-icons">alarm_off</span></a></li>  
    </ul> 
</div>

Что делает это путаным, так это то, что я не вижу никаких ошибок. Я не уверен, что случилось. Я также скопировал файлы шрифтов локально с here. Я добавил файлы шрифтов в свое приложение в папке с именем /resources/fonts. В файле CSS моего приложения, я добавил следующее в верхней:

@font-face { 
    font-family: 'Material Icons'; 
    font-style: normal; 
    font-weight: 400; 
    src: url('/resources/fonts/MaterialIcons-Regular.eot'); /* For IE6-8 */ 
    src: local('/resources/fonts/Material Icons'), 
     local('/resources/fonts/MaterialIcons-Regular'), 
     url(/resources/fonts/MaterialIcons-Regular.woff2) format('woff2'), 
     url(/resources/fonts/MaterialIcons-Regular.woff) format('woff'), 
     url(/resources/fonts/MaterialIcons-Regular.ttf) format('truetype'); 
}

В то время как это работает в Chrome, Firefox и Safari, он до сих пор не работает в IE 8 или 9. Что случилось?

источник

2016-12-29 user687554

IE 9 и 10 * должна * поддержка CSS 'шрифта face'. http://caniuse.com/#feat=fontface *, но *, вероятно, проблема заключается в том, что шрифт является файлом 'woff2', который кажется IE (любая версия) не поддерживает: http: // caniuse. com/# feat = woff2 (вы уверены, что он работает в IE 11?) –

Да, я уверен, что он работает в IE 11. – user687554

Шрифт поддерживается в IE, но только IE версии 10 и выше поддерживают шрифтовые лигатуры, что означает, что вы можете использовать «alarm_on» лигатуры и «alarm_off». В более старых версиях вы должны использовать соответствующие шестнадцатеричные кодировки, & # xE858; и & # xE857; – Borre

Вы должны использовать другой HTML для IE9 и ниже. Вы можете найти его на веб-сайте значков материалов here for alarm_on и here for alarm_off.

Так оно и должно быть:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css"> 

<div class="container"> 
    <ul class="list-inline"> 
    <li><a href="#"><span class="material-icons">&#xE858;</span></a></li> 
    <li><a href="#"><span class="material-icons">&#xE857;</span></a></li>  
    </ul> 
</div>

источник

2017-01-02 13:36:19 Borre

шрифт поддерживается в IE, но только IE версии 10 и ниже, вы можете использовать шестнадцатеричное кодирование.

Вот пример, и он отлично работает в IE9.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css"> 
 

 
<i class="material-icons">&#xE87C;</i>

<i class="material-icons"></i>

Для получения более подробной информации вы можете проверить here

источник

2017-01-05 10:49:22

ответ

Смежные вопросы