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正确地执行了它（即使这不是我想要的行为）。任何人都可以对此有所了解吗？

Answer 1

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

Answer 2

那你为什么不在条件评论中包装ie9特定的@ font-face声明呢？或者重新声明@ font-face for mobile。我假设“移动”你的意思是IEMobile？你也可以通过条件评论来定位IEMobile，这样你就可以做到这一点。

＆lt;！ - [if IE 9]＆gt;＆lt; style＆gt; @ font-face {font-family：'SomeFont'; src：url（'../ Fonts / somefont.eot'）; } ;＆LT; /风格＆GT;＆LT; ENDIF] - GT！; @media screen和（max-device-width：1000px）{ @ font-face {font-family：'SomeFont'; src：url（'../ Fonts / somefont.eot'）; } }

Answer 3

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

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

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

3 个答案: