@media查詢規則（IE9）中的font-face行爲不一致

Chrome，Firefox和Safari在媒體查詢和資源方面的當前行爲是在您需要它之前不加載資源;例如具有480px分辨率的移動設備將不會加載max-device-width: 1000px規則中的圖像。當然，這對於將重量級桌面資源遠離移動設備非常有用。@media查詢規則（IE9）中的font-face行爲不一致

我在加載字體資源時遇到了與此方法不一致的問題。下面將加載EXCEPT IE9

@media screen and (max-device-width: 1000px) { 
    @font-face{ 
     font-family: 'SomeFont'; 
     src: url('../Fonts/somefont.eot'); 
     /* full stack here etc. */ 
    } 
}

這是煩人，因爲我想從移動保持較大的字體走上面列出的所有瀏覽器的Web字體，但除非它是一個媒體查詢外IE9將不會加載該字體。

這是正確的行爲嗎？我無法在規範中找到有關字體資源的任何內容，所以可能是因爲IE9正確地做到了這一點（即使這不是我想要的行爲）。任何人都可以對此有所瞭解嗎？

來源

2011-10-27 Graham Conzett

這是原因："At-rules inside @media are invalid in CSS2.1"。
Firefox seems也遵守規範。

來源

2011-10-27 23:19:23 Knu

這似乎是答案！看起來它可能會改變爲CSS3。好找！ –

那麼你爲什麼不在條件註釋中包裝ie9特定的@ font-face聲明呢？無論是或重新宣佈@ font-face手機。我假設你說的「移動」是指IEMobile？你也可以通過條件評論來定位IEMobile，這樣你就可以做到這一點。

< - [如果IE 9] > <風格> @字體面{FONT-FAMILY： 'SomeFont'; src：url（'../ Fonts/somefont.eot'）; } ; </style > <！[endif] - > @media screen and（max-device-width：1000px）{font-family：'SomeFont'; src：url（'../ Fonts/somefont.eot'）; } }

來源

2011-10-30 06:17:37 albert

儘管老，我的答案可以幫助其他用戶有同樣的問題。我寫了一篇關於如何解決這個問題的文章，可以閱讀here。

基本上，您可以使用條件註釋和基於JavaScript的解決方案，因爲IE10會忽略條件註釋。

來源

2013-08-06 02:26:15

@media查詢規則（IE9）中的font-face行爲不一致

回答

相關問題