Несоответствия поведения @ font-face внутри правил запросов @media (IE9) - PullRequest
Новая
       17

Несоответствия поведения @ font-face внутри правил запросов @media (IE9)

4 голосов
/ 28 октября 2011

Текущее поведение в Chrome, Firefox и Safari, когда дело касается медиазапросов и ресурсов, заключается в том, чтобы не загружать ресурс, пока он вам не понадобится; например мобильное устройство с разрешением 480px не будет загружать изображения внутри правила max-device-width: 1000px. Естественно, это отлично подходит для хранения значительных ресурсов рабочего стола вдали от мобильных устройств.

Я столкнулся с несоответствиями с этим подходом, когда дело доходит до загрузки ресурсов шрифта. Следующее загрузит веб-шрифт для всех браузеров, перечисленных выше, КРОМЕ IE9 

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

Это раздражает, потому что я хочу держать большой шрифт подальше от мобильного телефона, но IE9 не будет загружать шрифт, если он не находится вне медиазапроса.

Это правильное поведение? Я не могу найти ничего о ресурсах шрифта, в частности, в спецификации, поэтому может быть, что IE9 делает это правильно (хотя это не мое поведение). Кто-нибудь может пролить свет на это?

Ответы [ 3 ]

3 голосов
/ 28 октября 2011

И вот почему: "Правила в @media недействительны в CSS2.1" .
Firefox кажется также соответствует спецификации.

0 голосов
/ 06 августа 2013

Хотя старый, мой ответ может помочь другим пользователям с той же проблемой.Я написал статью о том, как решить эту проблему, которую можно прочитать здесь .

По сути, вы можете использовать условный комментарий и решение на основе JavaScript, потому что IE10 игнорирует условные комментарии.

0 голосов
/ 30 октября 2011

так почему бы вам не обернуть конкретное объявление ie9 @ font-face в условные комментарии? либо это, либо повторно объявите @ font-face для мобильных устройств. Я предполагаю, что под "мобильным" вы подразумеваете IEMobile? Вы также можете настроить таргетинг на IEMobile с помощью условных комментариев, так что вы можете сделать это любым способом.

<! - [if IE 9]>

...