В этом блоге (немного раздражающая страница) (и, кстати, это не мой блог) описывается странная ошибка, с которой я столкнулся вчера только в Internet Explorer 8.Ошибка включает в себя .EOT веб-шрифты и <iframe> элементы.
Я не исследовал точный триггер для ошибки, но в основном это тот случай, когда страница использует веб-шрифт, который загружает контент в <iframe> таким образом, что фрейм также использует веб-шрифт, становится "искаженным" браузером.Ранее одобренный текст, отображаемый с помощью веб-шрифта, внезапно превращается в ужасно выглядящий Arial или что-то еще, вроде как само по себе.Иногда он переворачивается только для того, чтобы снова ухудшаться при случайном взаимодействии пользователя, например при движении мыши.
В этом посте есть пример.Чтобы прояснить, это запутанная страница, которая запуталась, а не страница в <iframe> (по крайней мере, так до сих пор, по моему опыту).
Кто-нибудь нашел лучший обходной путь, чем предложенный втот блог, который должен заставить "перезагрузить" элемент CSS <link>, откуда приходят объявления @font-face?(Я мог бы сделать это, но это было бы незначительной болью, плюс это заставило бы меня убрать настройку шрифта из моего документа <head>, что, если я вспомню, является проблемой производительности; мне придется поискать это и найти этоснова.)
edit - update
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 добавьте ответ с кратким изложением того, что вы пробовали, и я буду вам голосовать: -)