Question

我正在测试一个包含Microsoft图标的简单@import。在Chrome中运行良好，但IE没有显示任何内容，我也没有看到任何错误。

定型

@import "https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css";
.ms-Icon {
font-size:35px;
display:block;
margin:10px auto;
color:red;
border:1px solid black}

HTML

<div>
<i class="ms-Icon ms-Icon--alert"></i>
</div>

我已尝试在JSFiddle中添加css文件作为参考，但仍有此问题。我知道IE9及以下版本存在EOTF格式化问题，但我使用的是IE11并且没有找到任何解决方案的参考资料。

Answer 1

这是一个老问题，但我觉得如果我现在回答这个问题最好，因为即使应用了所有可能的解决方案，我也遇到了与IE相同的问题。我假设这里有问题的网站是在本地服务器上托管的，这基本上是IE的问题。我花了一段时间才意识到，但我注意到我的实时网站有工作字体，而我的本地版本没有。默认情况下，IE通常有一个设置应用于在本地托管网站（Intranet）的浏览器中显示兼容性视图模式，这意味着某些样式可能无法按预期正常工作，并且导入的字体通常也无法正常工作。

我可以做得更有效，因为我可以在模板和CSS中使用IF语句来避免额外的服务器查找（我的框架的一部分）。像这样：

在CSS中：

/* #IF !$is_msie */
<load font from CDN>
/* #ENDIF */

在HTML中：

<!-- #IF $is_msie -->
<load font from domain>
<!-- #ENDIF -->

IE11中的@import问题

1 个答案: