@media sorgu kurallarının (IE9) içindeki @ font-face davranış tutarsızlıkları

Medya sorguları ve kaynakları söz konusu olduğunda Chrome, Firefox ve Safari'deki mevcut davranış, ihtiyacınız olana kadar kaynağı yüklemez; Örneğin. 480px çözünürlüğe sahip bir mobil cihaz, maks cihaz genişliği: 1000 piksel kuralının içine resim yüklemez. Doğal olarak bu, masaüstü masaüstü kaynaklarını mobil cihazlardan uzak tutmak için harikadır.

Yazı tipi kaynaklarının yüklenmesi söz konusu olduğunda bu yaklaşımla tutarsızlıklara gidiyorum. Aşağıda, IE9 dışında listelenen tüm tarayıcılar için web yazı tipi yüklenecektir.

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

Bu can sıkıcı çünkü büyük bir yazı tipini cep telefonundan uzak tutmak istiyorum, ancak IE9 bir medya sorgusu dışında olmadığı sürece yazı tipini yüklemeyecek.

Bu doğru davranış mı? Özellikle spesifikasyonlarda font kaynakları ile ilgili hiçbir şey bulamıyorum, yani IE9'un doğru bir şekilde yapabilmesi (bu benim istediğim davranış olmamasına rağmen). Bu konuda herhangi bir ışık tutabilir mi?

4

3 cevap

3
katma
Bu cevap gibi görünüyor! CSS3 için de değişebilir gibi görünüyor. İyi bul!
katma yazar Graham Conzett, kaynak

Öyleyse neden şartlı yorumlarda ie9 özel @ font-yüz beyanını sarmıyorsunuz? Ya mobil cihaz için yazı tipi yüzünü yeniden adlandırın. "Mobil" ile IEMobile demek istediğimi mi varsayıyorum? IEMobile'i şartlı yorumlarla da hedefleyebilirsiniz, böylece her iki şekilde de yapabilirsiniz.

<!--[if IE 9]>

0
katma

Eski olmasına rağmen, benim cevabım aynı sorunu olan diğer kullanıcılara yardımcı olabilir. Bu sorunun nasıl çözüleceğine dair bir makale yazdım: burada .

Temel olarak, koşullu yorumlar ve JavaScript tabanlı bir çözüm kullanabilirsiniz, çünkü IE10 koşullu yorumları yok sayar.

0
katma