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

Question

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

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

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

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

这是正确的行为吗？我在规范中找不到任何关于字体资源的信息，所以可能是 IE9 正确地执行了它(即使这不是我想要的行为)。任何人都可以阐明这一点吗？

Answer 1

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