@font-face在@media查询规则中的行为不一致（IE9）

Question

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

但是，当涉及到加载字体资源时，我遇到了一些不一致的问题。以下内容将为上述所有浏览器加载Web字体，除了IE9。

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

这很烦人，因为我想在移动端不使用大型字体，但IE9只有在媒体查询之外加载字体。

这是正确的行为吗？我在规范中找不到关于字体资源的具体内容，所以可能是IE9正在正确地执行（尽管这不是我想要的行为）。有人能解释一下吗？

- Graham Conzett

Answer 1

以下是原因：“CSS2.1规范中，@media内部的@规则是无效的”。
Firefox 似乎也遵守了这个规范。

- Knu

---

那似乎就是答案！看起来在CSS3中可能会有所改变。好发现！ - Graham Conzett

Answer 2

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

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

- Aurelio De Rosa

Answer 3

那么为什么不在条件注释中包装ie9特定的@font-face声明呢？或者重新声明移动设备的@font-face。我假设你所说的“移动设备”是指IEMobile？你也可以通过条件注释来针对IEMobile，所以你可以任选一种方式。

<!--[if IE 9]><style> @font-face{ font-family: 'SomeFont'; src: url('../Fonts/somefont.eot'); } ;</style><![endif]--> @media screen and (max-device-width: 1000px) { @font-face{ font-family: 'SomeFont'; src: url('../Fonts/somefont.eot'); } }

- albert