自定義字體有時在IE8/IE7中以斜體顯示

在IE7和IE8中，使用自定義Web字體時，即使在明確設置font-style: normal時，文本有時也會以斜體顯示。這個問題是零星的 - 它會渲染幾次，然後我刷新，一切都以斜體顯示，然後我刷新並恢復正常。自定義字體有時在IE8/IE7中以斜體顯示

我使用這個@font-face聲明：

@font-face { 
    font-family: 'DIN'; 
    src: url('fonts/DINWeb.eot'); 
    src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb.woff') format('woff'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'DIN'; 
    src: url('fonts/DINWeb-Bold.eot'); 
    src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb-Bold.woff') format('woff'); 
    font-weight: bold; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'DIN'; 
    src: url('fonts/DINWeb-Ita.eot'); 
    src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb-Ita.woff') format('woff'); 
    font-weight: normal; 
    font-style: italic; 
} 
@font-face { 
    font-family: 'DIN'; 
    src: url('fonts/DINWeb-BoldIta.eot'); 
    src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb-BoldIta.woff') format('woff'); 
    font-weight: bold; 
    font-style: italic; 
}

即使世界上a comment this article表示它可能是對@font-face聲明的順序：但已停止這一問題的唯一的事情是完全移除斜體聲明。

Another Stack Overflow answer建議使用Font Squirrel @ font-face生成器;我無法做到這一點，因爲我使用的網絡字體文件有DRM。

有沒有辦法解決這個問題，而沒有完全刪除斜體聲明？

更新：經過進一步調查，似乎這個問題也影響IE8，而不僅僅是在兼容模式下。

來源

2012-07-09 Adam Sharp

您沒有提供您的HTML這是在使用中。嘗試使用獨特的'@ font-face'系列名稱。例如：'DINnormal，DINbold，DINitalic，DINboldItalic'。在這個[** SO Answer **]（http://stackoverflow.com/a/10273361/1195891）查看CSS和HTML示例。如果創建獨特的名字可以解決您的問題，我會做出答覆。乾杯! – arttronics 2012-07-10 04:32:12

@arttronics謝謝，結果發現獨特的字體家族名稱最終解決了這個問題。如果你寫了一個答案，我會繼續接受它。 – 2012-09-03 05:24:25

亞當夏普，很高興爲你解決問題......我發佈了一個答案。乾杯! – arttronics 2012-09-03 21:10:46

對於您的每個@font-facefont-family名稱，請改爲創建一個自定義名稱。

例子：這些CSS規則定義

@font-face { 
    font-family: 'DINnormal'; 
    src: url('fonts/DINWeb.eot'); 
    src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb.woff') format('woff'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'DINbold'; 
    src: url('fonts/DINWeb-Bold.eot'); 
    src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb-Bold.woff') format('woff'); 
    font-weight: bold; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'DINitalic'; 
    src: url('fonts/DINWeb-Ita.eot'); 
    src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb-Ita.woff') format('woff'); 
    font-weight: normal; 
    font-style: italic; 
} 
@font-face { 
    font-family: 'DINboldItalic'; 
    src: url('fonts/DINWeb-BoldIta.eot'); 
    src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb-BoldIta.woff') format('woff'); 
    font-weight: bold; 
    font-style: italic; 
}

後，那麼你可以包括特定的CSS規則：

li { 
    font: 18px/27px 'DINnormal', Arial, sans-serif; 
}

來源

2012-09-03 21:08:45 arttronics

如果像我一樣，你碰到這個問題就來了，同時出現了類似的問題使用TypeKit字體，this entry from the TypeKit blog解釋瞭如何強制使用TypeKit字體的每個權重&樣式的唯一font-family名稱來解決該問題。

來源

2013-03-06 00:52:54 poisontofu

我可以繼續這個。我遇到了這個評論，它幫助我解決了使用Typekit時遇到的問題。謝啦。 – Doidgey 2013-11-10 20:58:05

我有一個類似的問題，在使用IE8（模擬器）時，Web字體顯示爲斜體，挖掘和挖掘後我遇到了一篇文章，建議模擬器有時會誤導，尤其是當涉及到webFonts時，因爲我使用的是Windows 7機器，我無法下載真實的東西，所以我使用了這個名爲http://www.browserstack.com/的網站（沒有測試人員或虛假的瀏覽器，在真正的瀏覽器上測試，包括Internet Explorer 6 ，7，8，9，10和11）

，我注意到我的字體不是斜體了：d

這裏的鏈接文章我讀，

http://blog.typekit.com/2013/03/14/the-dangers-of-cross-browser-testing-with-ie9s-browser-modes/

希望這有助於你們，要是遇到這樣的事情來了，當研究它真的會救了我幾個小時

來源

2014-06-04 08:51:25

自定義字體有時在IE8/IE7中以斜體顯示

回答

相關問題