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

回答

相關問題