@media 查询规则 (IE9) 中的 @font-face 行为不一致答案

【问题标题】：@font-face behavior inconsistencies inside of @media query rules (IE9)@media 查询规则 (IE9) 中的 @font-face 行为不一致
【发布时间】：2011-12-16 20:45:37
【问题描述】：

Chrome、Firefox 和 Safari 中关于媒体查询和资源的当前行为是在您需要资源之前不加载资源；例如分辨率为 480 像素的移动设备不会在 max-device-width: 1000px 规则内加载图像。自然地，这对于使沉重的桌面资源远离移动设备非常有用。

在加载字体资源时，我遇到了与这种方法不一致的情况。以下将为上面列出的所有浏览器加载网络字体，除了 IE9

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

这很烦人，因为我想让大字体远离移动设备，但 IE9 不会加载字体，除非它在媒体查询之外。

这是正确的行为吗？我在规范中找不到任何关于字体资源的具体内容，因此可能是 IE9 正确地执行了此操作（即使这不是我想要的行为）。任何人都可以对此有所了解吗？

【问题讨论】：

标签： html css internet-explorer-9 font-face media-queries

【解决方案1】：

原因如下："At-rules inside @media are invalid in CSS2.1".
Firefox seems 也遵守规范。

【讨论】：

这似乎是答案！看起来它也可能会改变 CSS3。很好的发现！

【解决方案2】：

那么你为什么不把 ie9 特定的@font-face 声明包装在条件 cmets 中呢？要么为移动设备重新声明@font-face。我假设“移动”是指IEMobile？您也可以通过条件 cmets 定位 IEMobile，因此您可以采用任何一种方式。

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

【讨论】：

【解决方案3】：

虽然老了，但我的回答可以帮助其他有同样问题的用户。我写了一篇关于如何解决这个问题的文章，可以阅读here。

基本上，您可以使用条件注释加上基于 JavaScript 的解决方案，因为 IE10 会忽略条件 cmets。

【讨论】：