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

【问题标题】：IE8 CSS @font-face fonts only working for :before content on over and sometimes on refresh/hard refreshIE8 CSS @font-face 字体仅适用于：在内容结束之前，有时在刷新/硬刷新时
【发布时间】：2012-04-06 06:01:38
【问题描述】：

更新：我写了一篇关于我对这个问题的了解的博文。我仍然不完全理解它，但希望有人会阅读本文并阐明我的问题：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-family 和 content 属性都在工作，但其他原因导致图标仅在悬停后加载。

因此，当您尝试将字体与 :before{content: 'a'} 一起使用时，IE8 中的 @font-face 存在某种错误，但我不知道错误是什么。

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

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

编辑：更新了博客文章的断开链接。

【问题讨论】：

一个可以重现此行为的测试用例将是最有用的。
你能给出问题的代码、小提琴或网址吗？
没有足够的代码做出好的假设。
这是一个现场样本。 imagorecords.com/~andy 我只关心 IE8 中的图标。如果他们工作，重新加载页面并成为字母。
博文显然已移至andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8

标签： css internet-explorer-8 font-face

【解决方案1】：

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

我想我会把它放在这里更详细，以便其他人更快地使用它。

设置一个额外的类，例如。 IE8 的 html 标记上的 ie-loading-fix。包括你所有的 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 将删除隐藏所有 :before 和 :after 内容的 ie-loading-fix 样式，并在页面加载后强制 IE8 重绘所有 :before 和 :after 内容。

这个解决方案解决了我在使用 Font Awesome v4.4 时遇到的一个问题，即使我使用元标记明确将页面设置为在 Edge 模式下加载，它也会经常将 IE8 切换到兼容性视图或崩溃。

【讨论】：

【解决方案2】：

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

不在 IE8 中显示图标...

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

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

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

【讨论】：

【解决方案3】：

好的，所以我已经尝试解决此问题一段时间了。奇怪的是，icomoon 演示一直在 IE8 中运行，但我的从来没有，尽管我觉得我几乎有相同的东西。因此，我开始将所有内容（icomoon 演示以及我自己的实现）和我发现的两件事都简化了。

首先，我发现我需要将 cachebuster 保留在文件名上。

所以在我的实现中我有：

@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 中的某种刷新并导致图标出现。

【讨论】：

【解决方案4】：

对我来说，使用 content 属性上的声明 !important 很简单地解决了这个问题。

即：

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

【讨论】：

!important 并不总是一个好的选择，因为它只能被更具体的选择器和!important 语句覆盖。记住这一点
是的，但只要您不需要更改内容，它就可以正常工作。

【解决方案5】：

根据@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);
});

【讨论】：

【解决方案6】：

我在 Chrome 中遇到了类似的故障。这是我的解决方法：

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

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

【讨论】：

这与my solution 非常相似，我想这与以某种方式刷新 CSS 有关。

【解决方案7】：

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

这就是我所做的：

在html标签中添加ie8类：

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

给body添加加载类：

<body class='loading'>

仅覆盖 IE8 的 CSS 内容属性：

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

现在移除准备好的 DOM 上的加载类：

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

现在可以了！

【讨论】：

您能否提供更多详细信息和/或完整的 html 代码以及您的解决方案？
你错过了什么@Cassiano？

【解决方案8】：

我遇到了类似的问题，在我将鼠标悬停在父元素上之前，字体不会显示。我可以通过触发父元素上的焦点事件来解决这个问题。

element.parent().trigger('focus');

希望这对某人有所帮助！

【讨论】：

这对我有用。上述方法也适用，但仅适用于 IE8 上的初始页面呈现。如果在字形图标上有启用/禁用，则过渡将不平滑。

【解决方案9】：

我最近也遇到了这个问题，并通过在我的 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

【讨论】：

谢谢。这立即解决了 IE8 中的问题。
对我来说，这个解决方案大约有 50% 的时间有效。每次我加载页面（使用 F5 清除缓存）时，图标都不会显示。我将此解决方案与 ausi 的解决方案（它本身对我根本不起作用）结合起来，现在它 100% 的时间都在工作。
是否存在与 IE 字体相关的 CORS 问题？

【解决方案10】：

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

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

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

block.php

<?php
usleep(200000);
?>

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

这解释了这个问题没有得到更广泛和关注的事实。

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

【讨论】：

【解决方案11】：

我正在尝试完全相同的问题。在 IE8 中，webfont 图标（使用伪元素）有时会呈现回退字体，但当您将其悬停时，webfont 图标就会可见。

图标是使用 :after 和 :before 实现的，支持 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]-->

我现在很开心 :) 希望对您有所帮助！

【讨论】：

去试试这个，我会让你知道它对我有用。
起初对我有用，但我很好奇 HTML5shiv 如何解决这个问题，因为这不是 HTML5 功能。我做了一些研究，结果发现这个问题是因为 网络延迟。通过这种方式，您阻止了页面呈现几毫秒，因此可以在内容之前加载字体。

【解决方案12】：

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

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

【讨论】：

【解决方案13】：

我有同样的错误。

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

【讨论】：

这个sn-p是不是有点变形？在我看来，cssText 中应该有一个结束 }。
不，不是格式错误。您可以省略最后一个括号和最后一个分号。这使代码变小了 2 个字节。
@ausi 过早优化多少？
@ausi 我认为节省 2 字节不值得失去可读性。
例如，像@DavidTuite 这样不熟悉这种微优化的开发人员看到它并认为存在错误。这种优化很好，但最好让构建脚本生成它而不是影响源代码的可读性。如果这样的字节节省在这个阶段如此重要，为什么你的变量命名为“head”和“style”而不是“h”和“s”？

【解决方案14】：

解决方法：

如果 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;
    });
}

【讨论】：

【解决方案15】：

如果我没记错的话IE不读取TTF字体，它需要EOT字体

【讨论】：

我同时使用 EOT 和 EOT?#iefix。再次，一旦我悬停，字体就会出现。