Подтвердить что ты не робот

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

ОБНОВЛЕНИЕ: я написал сообщение в блоге о том, что я узнал об этой проблеме. Я все еще не совсем понимаю это, но, надеюсь, кто-то прочитает это и пролил свет на мою проблему: 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 у меня есть странная ошибка. Когда страница загружается, шрифт не работает. Вместо значков у меня есть письма повсюду. Как только я навису над страницей (телом), половина букв станет значком. Остальные становятся значками, когда я навис над ними.

SO font-face правильно встраивается. Свойства семейства шрифтов и содержимого также работают, но что-то еще вызывает загрузку значков только после наведения.

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

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

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

EDIT: обновлена ​​неработающая ссылка на сообщение в блоге.

4b9b3361

ОТВЕТЫ

Ответ 1

У меня была такая же ошибка.

Я исправил его, выполнив этот script на domready (только для IE8, конечно):

var head = document.getElementsByTagName('head')[0],
    style = document.createElement('style');
style.type = 'text/css';
style.styleSheet.cssText = ':before,:after{content:none !important';
head.appendChild(style);
setTimeout(function(){
    head.removeChild(style);
}, 0);

Это позволяет IE8 перерисовывать все псевдонимы :before и :after

Ответ 2

Недавно я столкнулся с этим и исправил его, дважды включив @font-face в свой CSS файл. Первый @font-face используется IE, а второй используется другими браузерами.

@font-face {
  font-family: "SocialFoundicons";
  src: url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "SocialFoundicons";
  src: url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot"),
       url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot?#iefix") format("embedded-opentype"),
       url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.woff") format("woff"), 
       url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.ttf") format("truetype"), 
       url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.svg#SocialFoundicons") format("svg");
  font-weight: normal;
  font-style: normal;
}

Источник: http://www.boonex.com/n/ie8-icon-font-fix-and-unused-language-keys-2012-08-20

Ответ 3

Я экспериментировал точно с той же проблемой. В IE8 значок webfont (с использованием псевдоэлементов) иногда отображает резервный шрифт, но когда вы его наводите, появляется значок webfont.

Значки были реализованы с использованием: after и: before с поддержкой IE7, как это.

В моем случае проект разработан в HTML5 и использует htmlshiv для поддержки новых тегов HTML5 в старых браузерах.

Проблема была смехотворно решена, разместив тег html5shiv script ниже основного CSS:

<link rel="stylesheet" href="/stylesheets/main.css" type="text/css">
<!--[if lt IE 9]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Я счастлив сейчас:) Надеюсь, это поможет!

Ответ 4

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

element.parent() триггер ( 'фокус').

Надеюсь, это поможет кому-то!

Ответ 5

Обход проблемы:

Найти таблицу стилей и перезагрузить готовый документ, если IE8:

Пример HTML:

<!DOCTYPE html>
<html>
<head>
<!-- … -->
<link id="base-css" rel="stylesheet" href="/styles.base.css" type="text/css" />
<!-- … -->
</head>
<!-- … -->
</html>

Пример JavaScript:

// Reload stylesheet on document ready if IE8
if ($.browser.msie && 8 == parseInt($.browser.version)) {
    $(function() {
        var $ss = $('#base-css');
        $ss[0].href = $ss[0].href;
    });
}

Ответ 6

Вышеупомянутые решения не исправили проблему для меня, когда IE8 обновлен. Также я нашел некоторые проблемы, когда добавление таблицы стилей нарушило бы исправление размера фона IE8 backgroundsize.min.htc

Итак, вот что я сделал:

Добавить тег ie8 в html-тег:

<!--[if IE 8 ]><html class="ie8"><![endif]-->

Добавить класс загрузки в тело:

<body class='loading'>

Отменить атрибут содержимого CSS только для IE8:

<style>
.ie8 .loading .icon:before {
    content: '' !important;
}
</style>

Теперь удалите класс загрузки в DOM ready:

$( function() {
    $('body').removeClass('loading')
} );

Теперь он работает!

Ответ 7

Основываясь на ответе от @ausi, вы можете реорганизовать это с помощью jQuery и CoffeeScript до 4 строк:

$(document).ready ->
  $style = $('<style type="text/css">:before,:after{content:none !important}</style>')
  $('head').append $style
  setTimeout (-> $style.remove()), 0

или с синтаксисом JavaScript:

$(document).ready(function() {
  var $style;
  $style = $('<style type="text/css">:before,:after{content:none !important}</style>');
  $('head').append($style);
  return setTimeout((function() {
    return $style.remove();
  }), 0);
});

Ответ 8

У меня был аналогичный глюк в Chrome. Вот мое исправление:

setTimeout(function(){
    jQuery('head').append('<style id="fontfix">*:before,*:after{}</style>');
    },100);

Моя догадка заключается в том, что стиль pseudo css был визуализирован до того, как webfont был готов, что привело к пустым глифам. После загрузки страницы, зависание или изменение css каким-либо образом вызвало их волшебно. Поэтому мое исправление просто заставляет обновление css ничего не делать.

Ответ 9

Для меня проблема была просто решена с помощью объявления !important в атрибуте content.

то есть:.

.icon:before {
   content: "\f108" !important;
}

Ответ 10

Хорошо, поэтому я пытался исправить эту проблему некоторое время. Как ни странно, демо-версия 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 и вызывает появление значков.

Ответ 11

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

Не показывает значок в IE8...

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

Имеет значок в IE8...

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

Ответ 12

Итак, вот вариант решения @ausi, который я использовал, который работал у меня. Это решение взято из комментария Адама в нижней части этой статьи http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8/

Я думал, что я поставил его здесь более подробно, чтобы сделать его более быстрым для других.

Задайте дополнительный класс, например. ie-loading-fix в теге html для IE8. Включите все свои CSS, а затем после этого у вас есть условный JS файл для IE8. Например:

<!DOCTYPE html>
<!--[if IE 8]>    <html class="ie-loading-fix"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Include all your CSS before JS -->
    <link rel="stylesheet" type="text/css" href="css/main.css">

    <!--[if lt IE 9]>
    <script src="js/ie.js"></script>
    <![endif]-->
  </head>
  ...

Затем в верхней части вашего основного файла CSS есть что-то вроде:

.ie-loading-fix :before,
.ie-loading-fix :after {
  content: none !important;
}

Затем в вашем файле IE8 js/ie.js укажите следующее:

window.onload = function () {
  var cname = document.documentElement.className;
  cname = cname.replace('ie-loading-fix', '');
  document.documentElement.className = cname;
}

Этот JS удалит стиль ie-loading-fix, который скрывает все содержимое :before и :after и заставит IE8 перерисовать все содержимое :before и :after после загрузки страницы.

Это решение устранило проблему, с которой я столкнулся с Font Awesome v4.4, которая часто переключает IE8 в представление совместимости или сбой, даже если я явно устанавливаю загрузку страницы в режиме Edge с помощью метатега.

Ответ 13

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

Ответ 14

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

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

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

block.php

<?php
usleep(200000);
?>

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

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

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

Ответ 15

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

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