Это сообщение в блоге (немного раздражающая страница там) (и это не мой блог, кстати) описывает странную ошибку, с которой я столкнулся вчера Только Internet Explorer 8. Ошибка включает в себя веб-шрифты .EOT и элементы <iframe>.
Я не изучил подробный триггер ошибки, но в основном это тот случай, когда страница, использующая веб-шрифт, который загружает контент в <iframe>, так что кадр также использует веб-шрифт, становится "испорченным" браузера. Ранее текст ОК, отображаемый с помощью веб-шрифта, внезапно переключается на ужасный Arial или что-то еще, своеобразное. Иногда он откидывается назад, только для того, чтобы снова ухудшаться при случайных пользовательских взаимодействиях, таких как мыши.
В этом блоге есть пример. Чтобы уточнить, это страница, которая запуталась, а не страница в <iframe> (по крайней мере, это случай, который до сих пор был в моем опыте).
Кто-нибудь нашел лучшее обходное решение, чем то, что было предложено в этом блоге, чтобы заставить "перезагрузить" элемент CSS <link>, откуда появились объявления @font-face? (Я мог бы это сделать, но это было бы незначительной болью, плюс это заставило бы меня перенести мою настройку шрифта из моего документа <head>, который, если я помню, является проблемой производительности, мне придется всматриваться и обнаруживать, что лакомый кусочек снова.)
edit — Обновление
OK здесь тестовая страница. Здесь главная (контейнерная) страница:
<!DOCTYPE html>
<html>
<head>
<style id='font_style'>
@font-face {
font-family: 'bold-display';
src: url('DejaVuSans-Bold.eot');
}
</style>
<style>
.fancy { font-family: bold-display, "franklin gothic medium", "verdana", sans-serif; font-size: 32px; }
iframe { width: 500px; height: 200px; }
#floater {
position: absolute;
top: 100px; left: 100px;
display: none;
}
#floater.showing {
display: block;
}
</style>
<script>
function load() {
var frame = document.createElement('iframe'),
floater = document.getElementById('floater'),
target = document.getElementById('target');
frame.src = 'frame.html';
target.appendChild(frame);
floater.className += 'showing';
}
function unload() {
var floater = document.getElementById('floater'),
target = document.getElementById('target');
target.innerHTML = '';
floater.className = floater.className.replace(/\bshowing\b/g, '');
}
</script>
</head>
<body>
<div class='fancy'>Hello World</div>
<button type='button' onclick='load()'>Click Me</button>
<div id='floater'>
<div id='target'></div>
<button type='button' onclick='unload()'>Close</button>
</body>
</html>
Страница фрейма имеет те же @font-face и фиктивные сообщения.
Проблема, похоже, связана с использованием загруженных шрифтов со списком более чем одного альтернативного шрифта. Я (без уважительной причины) бросил в пару подобных более распространенных шрифтов в своих значениях "font-family". Когда я отбросил их обратно:
.title { font-family: bold-display, sans-serif; }
тогда проблема исчезла (или, по крайней мере, она до сих пор ушла).
Спасибо тем, кто помог. Чтобы @albert, добавьте ответ, в котором суммируется то, что вы пробовали, и я буду перенаправлять вас: -)
