IE8 CSS @ font-face шрифты работают только для: перед тем, как контент перезагружается, а иногда - при обновлении / усиленном обновлении

Question

ОБНОВЛЕНИЕ: я написал сообщение в блоге о том, что я узнал об этой проблеме.Я до сих пор не до конца понимаю, но, надеюсь, кто-то прочтет это и прояснит мою проблему: http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8

У меня есть страница, где я использую @ font-face для импорта нестандартного шрифтадля икон.Иконки создаются с помощью класса:

.icon {font-family: 'icon-font';}
.icon:before {content: 'A';}

И вуаля, у меня есть любой значок, используемый для «А».Довольно стандартный материал, работает во всех браузерах, включая IE8.

Однако в IE8 у меня странная ошибка.Когда страница загружается, шрифт не работает.Вместо значков у меня повсюду буквы.Как только я наведу курсор мыши на страницу (тело), ​​половина букв станет иконкой.Остальные становятся иконами, когда я нахожу их над собой.

ТАК что font-face вставляется правильно.Свойства font-family и content оба работают, но что-то еще заставляет иконки загружаться только после наведения.

Так что есть некоторая ошибка с @ font-face в IE8, когда вы пытаетесь использовать шрифтwith: before {content: 'a'}, но я понятия не имею, что это за ошибка.

Я часами искал похожую ошибку / проблему IE8 / что-нибудь, но у меня не былоудачи и я схожу с ума.Какие-либо предложения?

Дайте мне знать, могу ли я предоставить больше информации, которая может быть полезна.

РЕДАКТИРОВАТЬ: Обновлена ​​неработающая ссылка на сообщение в блоге.

Answer 1

Моя проблема с IE8 была решена путем удаления двойной двоеточия в селекторе псевдоэлементов.

Не отображает значок в IE8 ...

.icon::before {
    content: "\76";
}

Отображает ли значок в IE8 ...

.icon:before {
    content: "\76";
}

Answer 2

Хорошо, поэтому я пытался решить эту проблему некоторое время.Как ни странно, демоверсия icomoon продолжала работать в IE8, а моя - нет, хотя я чувствовал, что у меня почти такая же вещь.Поэтому я начал все сводить (демонстрацию icomoon, а также мою собственную реализацию) и обнаружил две вещи, которые должны были быть там, чтобы это работало.

Сначала я обнаружил, что мне нужно сохранить кешбастерна имя файла.

Так что в моей реализации у меня было:

@font-face {
    font-family: 'iconFont';
    src:url('icon_font.eot');
    src:url('icon_font.eot') format('embedded-opentype'),
        url('icon_font.woff') format('woff'),
        url('icon_font.ttf') format('truetype'),
        url('icon_font.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

Но мне нужно было:

@font-face {
    font-family: 'iconFont';
    src:url('icon_font.eot?-v9zs5u');
    src:url('icon_font.eot?#iefix-v9zs5u') format('embedded-opentype'),
        url('icon_font.woff?-v9zs5u') format('woff'),
        url('icon_font.ttf?-v9zs5u') format('truetype'),
        url('icon_font.svg?-v9zs5u#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

Второе, а этот не делаетсмысл в том, что мне нужно что-то в таблице стилей с псевдоселектором :hover.Неважно, что он включен или какие у него правила, просто нужно что-то, и тогда, когда я наведусь на них, появятся значки.

Поэтому я просто вставил [data-icon]:hover{} в свою таблицу стилей CSSпросто так, без каких-либо правил).

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

Answer 3

Я провел некоторое исследование в соответствии с @vieron answer , и оказалось, что еще один способ решить эту проблему - заблокировать рендеринг страницы на несколько миллисекунд, чтобы шрифт мог загружаться до содержимого. Тем не менее, блокировка рендеринга страницы не самый умный способ решить эту проблему, потому что вы не можете знать, сколько мс вы должны заблокировать.

Я доказал это, поместив php-файл в качестве исходного файла для javascript.

<!--[if lt IE 9]>
<script src="/block.php"></script>
<![endif]-->

block.php

<?php
usleep(200000);
?>

Если у вас есть какие-либо внешние библиотеки JavaScript, такие как HTML5shiv, это происходит автоматически, за исключением того, что вы работаете с сайтом в локальной сети (интрасеть или локальный хост) с очень низкой задержкой и без сценариев перед контентом.

Это объясняет тот факт, что проблема не является более распространенной и замеченной.

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

Answer 4

Это исправление, мы столкнулись с этой проблемой с IE7, IE8 и IE9 при использовании ajax

setInterval(function(){
    var $ss = $('#base-css');
    $ss[0].href = $ss[0].href;
},300);

Answer 5

Если я не ошибаюсь, то IE не читает шрифт TTF, ему требуются шрифты EOT