资源不在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

您应该为IE9及更低版本使用不同的HTML。您可以在材料图标网站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

资源不在IE中呈现9

回答

相关问题