@import問題在IE11中

Question

我正在測試一個簡單的@import包含的微軟圖標。在Chrome中工作正常，但IE瀏覽器不顯示任何內容，並且我沒有看到任何錯誤。

link to example

造型

@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> 

我試着添加CSS文件作爲參考，以及在的jsfiddle，仍然有這個問題。我知道IE9和下面的EOTF格式有一些問題，但我使用IE11，並沒有找到任何解決方案的參考。

Answer 1

This is an old question, however I feel it would be best if I answered it now as I came across the same problem with IE even after all possible solutions were applied. I am assuming the website in question here was hosted on a local server, which IS the problem with IE essentially. It took me a while to realize, but I noticed that my live website had working fonts, whilst my local version didn't. By default IE usually has a setting applied to show compatibility view mode in the browser for locally hosted websites (Intranet), which means that some styling may not work correctly as intended and also imported fonts often will not work. 

I can do it more effecient because I can use IF statements in templates and CSS to avoid an extra server lookup (part of my framework). Something like this: 

In CSS: 

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

In HTML: 

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