资源未在 IE 9 中呈现答案

【问题标题】：Resource not rendering in IE 9资源未在 IE 9 中呈现
【发布时间】：2017-01-05 18:49:22
【问题描述】：

我有一个使用图标字体的网页。该网页在 Chrome、Firefox 和 Safari 中运行良好。它在 Edge 和 IE 11 中运行良好。但是，我还需要支持 IE 8、9 和 10。我的问题是，在 IE 8、9 甚至 10 中，图标不会出现。你可以看到这个Bootply 的问题。在其中，我有以下代码：

<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 中仍然无效。出了什么问题？

【问题讨论】：

IE 9 和 10应该支持 CSS font-face。 caniuse.com/#feat=fontface 但是，问题可能是字体是woff2 文件，它似乎IE（任何版本）不支持：caniuse.com/#feat=woff2（你确定它适用于 IE 11？）
是的，我确信它可以在 IE 11 中使用。
IE 支持该字体，但只有 IE 10 及更高版本支持字体连字，这意味着您可以使用连字“alarm_on”和“alarm_off”。在旧版本中，您应该使用相应的十六进制编码 和 

标签： css twitter-bootstrap internet-explorer

【解决方案1】：

您应该为 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>

【讨论】：

【解决方案2】：

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">&#xE87C;</i>

更多详情可以查看here

【讨论】：