谷歌字體只在IE中顯示一個重量

我試圖在我的網站上使用不同重量的Google字體。這裏是我使用的代碼：谷歌字體只在IE中顯示一個重量

<link href="//fonts.googleapis.com/css?family=Roboto:100,300,500" rel="stylesheet">

一切工作正常在Chrome和Safari。但是在IE中，無論我設置一個元素的字體權重，一切都看起來很大膽。

我找到了一個工作。如果我單獨加載每個字體重量（使用下面的代碼），一切都在IE中運行。

<link href="//fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet"> 
<link href="//fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet"> 
<link href="//fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">

雖然有效，但效率不高。任何人有更好的解決方案？

謝謝！

來源

2016-06-14 user2874270

如果您設置'body {font-weight：300;}'，該怎麼辦？默認值爲'normal'，即'400'，但您沒有將其包含在您的套件中。 – Stickers

謝謝你的建議，但我已經有了。 – user2874270

我無法在IE11中重現該問題。 http://jsfiddle.net/5s5o5h9n/1/在所有瀏覽器中看起來都一樣。 –

事實證明，問題是IE設置爲以兼容模式加載Intranet站點。由於開發環境位於本地網絡上（因此也是Intranet站點），因此IE不知情地切換到兼容模式。打開該設置解決問題

來源

2016-06-21 14:56:19 user2874270

嘗試把正確的谷歌字體提示行：

<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,500' rel='stylesheet' type='text/css'>

或將字體到你的CSS文件：

@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,500);

不知道還有什麼可以幫忙，對不起。

來源

2016-06-14 19:56:40 pavelccz

谷歌字體只在IE中顯示一個重量

回答

相關問題