@media查询规则内部的@font-face行为不一致(IE9)

Question

Chrome, Firefox和Safari当前的行为，当涉及到媒体查询和资源是不加载资源，直到你需要它;例如，分辨率为480px的移动设备不会加载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做得正确(尽管这不是我想要的行为)。有人能解释一下吗?

Answer 1

原因如下:" @media中的At-rules在CSS2.1中无效"。
Firefox似乎也尊重这个规范。

Answer 2

那么为什么不直接将ie9特定的@font-face声明包装在条件注释中呢?或者为移动设备重新声明@font-face。我猜你说的"移动"是指我的移动吧?你也可以通过条件注释来定位IEMobile，所以你可以用任何一种方法。

& # 60; !——[if IE 9]><@font-face{font-family: 'SomeFont';src: url(. ./字体/somefont.eot);}& # 60;/风格# 62;& # 60;! [endif]——& # 62;@media screen and (max-device-width: 1000px) {@font-face{font-family: 'SomeFont';src: url(. ./字体/somefont.eot);}}

Answer 3

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

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