目前在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正在正确地执行(尽管这不是我想要的行为)。有人能解释一下吗?