@ font-face行为不一致@media查询规则（IE9） [英] @font-face behavior inconsistencies inside of @media query rules (IE9)

问题描述

当涉及到媒体查询和资源时，Chrome，Firefox和Safari的当前行为是在您需要之前不加载资源;例如480像素分辨率的移动设备将无法加载 max-device-width：1000px 规则中的图片。自然，这是伟大的保持重量的桌面资源远离移动设备。

The current behavior in Chrome, Firefox and Safari when it comes to media queries and resources is to not load the resource until you need it; e.g. a mobile device with a 480px resolution will not load images inside of max-device-width: 1000px rule. Naturally this is great for keeping weighty desktop resources away from mobile devices.

在加载字体资源时，我遇到了与这种方法不一致的问题。以下将加载除IE8以外的所有浏览器的网络字体

I am running into inconsistencies with this approach when it comes to loading font resources. The following will load the web font for all browsers listed above EXCEPT IE9

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

这是令人讨厌的，因为我想保持一个大字体远离手机，但IE9将不会加载字体，除非它在媒体查询外。

This is annoying because I want to keep a large typeface away from mobile, but IE9 will not load the font unless it is outside a media query.

这是正确的行为？我找不到任何关于字体资源专门在规范，所以可能是IE9正在做正确（即使这不是我的期望的行为）。

Is this the correct behavior? I can't find anything about font resources specifically in the spec, so it could be that IE9 is doing it correctly (even though this is not my desired behavior). Can anyone shed any light on this?

推荐答案

这里是为什么：@media中的规则在CSS2.1中无效。

Firefox 似乎也尊重规范。

Here's why: "At-rules inside @media are invalid in CSS2.1".
Firefox seems to respect the specification as well.

这篇关于@ font-face行为不一致@media查询规则（IE9）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！