@ inconsistenties van @face-face-gedrag in @media-queryregels (IE9)

Het huidige gedrag in Chrome, Firefox en Safari als het gaat om mediaquery's en -bronnen is om de resource niet te laden totdat u deze nodig hebt; bijv. een mobiel apparaat met een resolutie van 480px laadt geen afbeeldingen binnen de regel max-device-width: 1000px . Uiteraard is dit geweldig voor het weghouden van zware desktopbronnen van mobiele apparaten.

Ik kom inconsistenties tegen met deze aanpak als het gaat om het laden van lettertypen. Het volgende laadt het weblettertype voor alle bovenstaande browsers BEHALVE IE9

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

Dit is vervelend omdat ik een groot lettertype uit de buurt van mobiel wil houden, maar IE9 laadt het lettertype alleen als het buiten een mediaquery valt.

Is dit het juiste gedrag? Ik kan niets vinden over fontbronnen specifiek in de specificatie, dus het kan zijn dat IE9 het correct doet (hoewel dit niet mijn gewenste gedrag is). Kan iemand hier enig licht op werpen?

4

3 antwoord

Dit is waarom: "At-rules binnen @media zijn ongeldig in CSS2. 1" .
Firefox lijkt ook de specificatie te respecteren.

3
toegevoegd
Dat lijkt het antwoord te zijn! Het lijkt erop dat het ook voor CSS3 kan veranderen. Goede vondst!
toegevoegd de auteur Graham Conzett, de bron

dus waarom pak je de ie9-specifieke @ font-face-verklaring niet in voorwaardelijke opmerkingen? ofwel dat of @ font-face voor mobiel opnieuw declareren. ik neem aan dat met "mobiel" je IEMobile bedoelt? je kunt IEMobile ook via condtionele opmerkingen targeten, dus je kunt het op beide manieren doen.

<!--[if IE 9]>

0
toegevoegd

Hoewel oud, kan mijn antwoord andere gebruikers met hetzelfde probleem helpen. Ik heb een artikel geschreven over het oplossen van dit probleem dat kan worden gelezen hier .

Kortom, u kunt een voorwaardelijke opmerking plus een JavaScript-gebaseerde oplossing gebruiken omdat IE10 voorwaardelijke opmerkingen negeert.

0
toegevoegd