IE8 CSS @ font-face字体仅适用于：在内容结束之前，有时在刷新/硬刷新之前

时间：2012-03-21 17:01:51

标签： css internet-explorer-8 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';}

瞧，我有任何用于“A”的图标。非常标准的东西，适用于所有浏览器，包括IE8。

然而，在IE8中，我有一个奇怪的错误。页面加载时，字体无法正常工作。我没有图标，而是遍布整个地方。一旦我将鼠标悬停在页面（正文）上，一半的字母就变成了图标。当我将鼠标悬停在它们上面时，剩下的就成了偶像

所以font-face正确嵌入。 font-family和content属性都有效，但是其他东西导致图标仅在悬停后加载。

因此，当您尝试使用以下字体时，IE8中的@ font-face会出现某种错误：在{content：'a'}之前，但我不知道错误是什么。

我在这里搜索了几个小时的类似错误/ IE8问题/任何东西，但我没有运气，我即将发疯。有什么建议？

如果我能提供可能有用的信息，请告诉我。

编辑：更新了博客帖子的断开链接。

15 个答案:

答案 0 :(得分：71)

我有同样的错误。

我通过在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伪元素

答案 1 :(得分：22)

我最近也遇到过这种情况，并通过在我的CSS文件中包含@ font-face两次来修复它。第一个@ 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

答案 2 :(得分：18)

我正在尝试完全相同的问题。在IE8中，webfont图标（使用伪元素）有时会呈现后备字体，但是当您将鼠标悬停在它上面时，webfont图标就会显示出来。

图标是使用以下方式实现的：在IE7支持之前和之前：like this。

就我而言，该项目是在HTML5中开发的，并使用htmlshiv来支持旧浏览器中的新HTML5标记。

这个问题被荒谬地解决了，将html5shiv脚本标记放在主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]-->

我现在很高兴:)我希望有所帮助！

答案 3 :(得分：5)

我遇到了类似的问题，直到我在父元素上盘旋时字体才会显示出来。我能够通过在元素父元素上触发焦点事件来解决这个问题。

element.parent（）触发（ '焦点'）;

希望这有助于某人！

答案 4 :(得分：4)

解决方法：

查找样式表并在文档就绪时重新加载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;
    });
}

答案 5 :(得分：4)

以上解决方案在IE8刷新时没有为我解决问题。另外我发现一些问题，添加样式表会破坏IE8背景大小修复backgroundsize.min.htc

所以这就是我所做的：

将ie8类添加到html标记：

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

将加载类添加到正文：

<body class='loading'>

仅为IE8覆盖CSS内容属性：

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

现在删除DOM ready上的加载类：

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

现在有效！

答案 6 :(得分：2)

基于@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);
});

答案 7 :(得分：1)

我在Chrome中遇到了类似的故障。这是我的修复：

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

我的猜测是，在webfont准备好之前渲染了伪css样式，这导致了空白的字形。页面加载后，以任何方式悬停或改变css会导致它们神奇地出现。所以我的修复只会强制进行无效的css更新。

答案 8 :(得分：1)

对我来说，问题只是使用内容属性上的声明!important来解决。

即：

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

答案 9 :(得分：0)

好吧，所以我一直试图解决这个问题。 奇怪的是，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中的某种刷新并导致图标显示出来。

答案 10 :(得分：0)

我的IE8问题是通过删除伪元素选择器中的双冒号来解决的。

不在IE8中显示图标... 

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

是否在IE8中显示图标... 

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

答案 11 :(得分：0)

好的，这是我用过的@ ausi解决方案的变体，它对我有用。此解决方案来自Adam在本文底部的评论http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8/

我想我会更详细地说明这一点，以便让其他人更快地使用它。

设置额外的课程，例如。 ie-loading-fix在IE8的html标签上。 包括所有CSS，然后包含IE8的条件JS文件。例如：

<!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切换到兼容性视图或崩溃。

答案 12 :(得分：-1)

如果我没有错，那么IE不会读取TTF字体，它需要EOT字体

答案 13 :(得分：-1)

我根据@vieron answer进行了一些研究，结果证明解决此问题的另一种方法是阻止页面呈现几毫秒，以便在内容之前加载字体。但是，阻止页面呈现并不是最明智的解决方法，因为你不知道应该阻止多少ms。

我通过将php文件作为javascript的源文件证明了这一点。

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

block.php 

<?php
usleep(200000);
?>

如果您有任何外部JavaScript库，例如HTML5shiv，这会自动发生，除非您在本地网络（Intranet或localhost）上运行网站，延迟非常低且内容之前没有脚本。

这解释了这个问题没有得到更广泛的启发和注意。

我真的很努力找到一个优雅的解决方案，但我找不到排除javascript或阻止IE页面呈现的东西。

答案 14 :(得分：-4)

这是修复，我们在使用ajax时遇到IE7，IE8和IE9这个问题

setInterval(function(){
    var $ss = $('#base-css');
    $ss[0].href = $ss[0].href;
},300);
相关问题
最新问题