@font-face behavior inconsistencies inside of @media query rules (IE9)

问题

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.

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. */
    }
}

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.

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?

回答1:

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

回答2:

so why don't you just wrap the ie9 specific @font-face declaration in conditional comments? either that or re-declare @font-face for mobile. i'm assuming that by "mobile" you mean IEMobile? you can target IEMobile via condtional comments as well, so you could do it either way.

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