IE8 веб-шрифт iframe ошибка обходные пути

Если вы только что создали кросс-браузер @font-face синтаксис через fontsquirrel.com я не думаю, что у тебя будут проблемы. вы хотите быть встраивание:

@font-face{
    font-family: 'DejaVuSansBook';
    src: url('DejaVuSans-webfont.eot'); /* ie9 compat mode */
    src: url('DejaVuSans-webfont.eot?#iefix') format('eot'),  /* ie 6-7-8 */
         url('DejaVuSans-webfont.woff') format('woff'), /* modern browsers */
         url('DejaVuSans-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
         url('DejaVuSans-webfont.svg#webfontLXhJZR1n') format('svg'); /* Legacy iOS */
}

вы также можете использовать скрипт загрузчика webfont, если обнаружите, что синтаксис не работает. Я не сравнивал функциональность с кодом, на который ответил выше (я уверен, что он работает),это js typekit и googlefonts используют для загрузки своих шрифтов.

Я столкнулся с этим q&A, исследуя очень похожую ситуацию, за исключением того, что iframe вообще не участвует. Все, что потребовалось, это использовать веб-шрифт google и много плавающих divs, чтобы заставить IE8 отображать текст по-разному после перезагрузки. Прочитав это

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

Я изменил стек шрифтов в моем css только на один альтернатива, и жучок исчез.

большое спасибо, что указал мне в правильном направлении!

решение, которое я использовал, было

@font-face {
    font-family: 'NewsGothicFSMedium';
    src: url('NewsGothic-Medium-webfont.eot');
    src: url('NewsGothic-Medium-webfont.eot?#iefix')  format('embedded-opentype'),
         url('NewsGothic-Medium-webfont.woff') format('woff'),
         url('NewsGothic-Medium-webfont.ttf') format('truetype'),
         url('NewsGothic-Medium-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NewsGothicFSMediumIframe';
    src: url('NewsGothic-Medium-webfont.eot');
    src: url('NewsGothic-Medium-webfont.eot?#iefix')  format('embedded-opentype'),
         url('NewsGothic-Medium-webfont.woff') format('woff'),
         url('NewsGothic-Medium-webfont.ttf') format('truetype'),
         url('NewsGothic-Medium-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

тогда просто ссылайтесь на семейство шрифтов Iframe в css iframe. Его немного дополнительный css, но я думаю, что лучше, чем перезагрузить css, если вы используете только несколько шрифтов.

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

<!--[if lte IE 8]>
    <style type="text/css">
        html {
            visibility: hidden;
        }
    </style>
    <script type="text/javascript">
        $(window).load(function() {
            $('html').css('visibility', 'visible');
        });
    </script>
<![endif]-->

IE

согласно https://github.com/stubbornella/csslint/wiki/Bulletproof-font-face, Вы можете избежать этого, просто добавив вопросительный знак после первого url шрифта и обмануть способ, которым браузер интерпретирует url. Сработало как по волшебству.

проблема, с которой мы столкнулись, заключалась в том, что, когда iframe с тем же именем не удалось загрузить (404 в нашем случае), IE (иногда) выгружал шрифт на главной странице. Наше решение состояло в том, чтобы переименовать шрифт на странице iframed (в случае, если шрифт не может быть загружен по какой-то причине вне нашего контроля) и убедиться, что он правильно загружен нормально.

моим решением было установить только одну возможность типографики для IE8. Пример:

общие.в CSS

@font-face {
  font-family: 'patua-one'; /PatuaOneRegular';/
  src: url('../fonts/PatuaOne-Regular-webfont.eot');
  src: url('../fonts/PatuaOne-Regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/PatuaOne-Regular-webfont.woff') format('woff'),
       url('../fonts/PatuaOne-Regular-webfont.ttf') format('truetype'),
       url('../fonts/PatuaOne-Regular-webfont.svg#PatuaOneRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
}

h1,h2,h3,h4,h5,h6 {
    font-family: patua-one,Arial,Helvetica Neue,Helvetica,sans-serif;
}

<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->

ie8.в CSS

body {
    font-family: Arial;
}

h1,h2,h3,h4,h5,h6 {
    font-family: patua-one;
}

У меня была аналогичная проблема, но она была с простым набором фреймов, а не с динамическими iframes. С ответом Из ktash, это централизует взлом в рамку верхнего уровня, не влияя на все страницы, которые могут загружаться вокруг набора фреймов.

условный блок переопределит обработчик onload только для IE8.

есть еще FOUC иногда, но, по крайней мере, ситуация исправляется, а не требует от пользователя двигаться вокруг.

<html>
<head>
<script>
function markFrameLoaded() { 
    // noop for the well behaved browsers of the world
}
</script>
<!--[if IE 8]>
<script>
function markFrameLoaded() {
    var frameCount = window.frames.length;
    for ( var f = 0 ; f < frameCount ; f++ ) {
        var styleCount = window.frames[f].document.styleSheets.length;
        for ( var s = 0 ; s < styleCount ; s++ ) {
            var sheet = window.frames[f].document.styleSheets[s];
            sheet.disabled = true;
            sheet.disabled = false;
        }
    }
}
</script> 
<![endif]-->
</head>
<frameset rows="*,*">
<frame src="top.html" onload="markFrameLoaded()">
<frame src="bottom.html" onload="markFrameLoaded()">
</frameset>
</html>