IE8 CSS @font-face 字体仅适用于 :before content on over 有时在刷新/硬刷新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9809351/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE8 CSS @font-face fonts only working for :before content on over and sometimes on refresh/hard refresh
提问by Andy
UPDATE: I've written a blog post about what I've learned about this issue. I still don't fully understand it, but hopefully someone will read this and shed some light on my issue: http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8
更新：我写了一篇关于我对这个问题的了解的博客文章。我仍然不完全理解它，但希望有人会阅读本文并阐明我的问题：http: //andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8
I have a page where I'm using @font-face to import a custom font for icons. The icons are created with a class:
我有一个页面，我正在使用 @font-face 为图标导入自定义字体。图标是用一个类创建的：
.icon {font-family: 'icon-font';}
.icon:before {content: 'A';}
And voila, I have whatever icon is used for "A". Pretty standard stuff, works in all browsers, including IE8.
瞧，我有任何用于“A”的图标。非常标准的东西，适用于所有浏览器，包括 IE8。
However, in IE8, I have a bizarre bug. When the page loads, the font is not working. Instead of icons, I have letters all over the place. Once I hover OVER the page (body), half the letters become icons. The rest become icons when I hover over them.
但是，在 IE8 中，我有一个奇怪的错误。当页面加载时，字体不起作用。我没有图标，而是到处都是字母。一旦我将鼠标悬停在页面（正文）上，一半的字母就会变成图标。当我将鼠标悬停在它们上面时，其余的变成了图标。
SO the font-face is embedding properly. The font-family and content properties are both working, but something else is causing the icons to load only after hover.
所以字体正确嵌入。font-family 和 content 属性都可以工作，但其他原因导致图标仅在悬停后加载。
So there's some sort of bug with @font-face in IE8 when you try to use the font with :before{content: 'a'} but I have no idea what the bug is.
因此，当您尝试将字体与 :before{content: 'a'} 一起使用时，IE8 中的 @font-face 存在某种错误，但我不知道错误是什么。
I've searched for hours on here for a similar bug/IE8 issue/anything, but I've had no luck and I'm about to go crazy. ANY suggestions?
我已经在这里搜索了几个小时以查找类似的错误/IE8 问题/任何问题，但我没有运气，我快要疯了。有什么建议？
Let me know if I can provide anymore info that might be helpful.
如果我能提供更多可能有用的信息，请告诉我。
EDIT: Updated the broken link to the blog post.
编辑：更新了博客文章的断开链接。
回答by ausi
I had the same bug.
我有同样的错误。
I fixed it by executing this script on domready (only for IE8 of course):
我通过在 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);
This lets IE8 redraw all :beforeand :afterpseudo elements
这让 IE8 重绘所有:before和:after伪元素
回答by Ryo C.
I recently encountered this as well, and fixed it by including the @font-face twice in my CSS file. The first @font-face is used by IE and the second is used by other browsers.
我最近也遇到了这个问题，并通过在我的 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;
}
Source: http://www.boonex.com/n/ie8-icon-font-fix-and-unused-language-keys-2012-08-20
来源：http: //www.boonex.com/n/ie8-icon-font-fix-and-unused-language-keys-2012-08-20
回答by vieron
I was experimenting exactly the same problem. In IE8 the webfont icon (using pseudo-elements) sometimes renders the fallback font but when you hover it the webfont icon comes visible.
我正在试验完全相同的问题。在 IE8 中，webfont 图标（使用伪元素）有时会呈现后备字体，但是当您将其悬停时，webfont 图标就会出现。
The icons were implemented using :after and :before with IE7 support, like this.
图标是使用 :after 和 :before 实现的，支持 IE7，就像这样。
In my case, the project is developed in HTML5 and using htmlshivto support the new HTML5 tags in older browsers.
就我而言，该项目是用 HTML5 开发的，并使用htmlshiv来支持旧浏览器中的新 HTML5 标签。
The problem was ridiculously solved placing the html5shiv script tag below the main CSS:
将 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]-->
I'm happy now :) I hope that helps!
我现在很高兴 :) 希望对您有所帮助！
回答by Lakota Lefler
I was having a similar issue where the font would not show up until I hovered over the parent element. I was able to fix this problem by triggering a focus event on the elements parent.
我遇到了类似的问题，在我将鼠标悬停在父元素上之前，字体不会显示。我能够通过在元素父元素上触发焦点事件来解决这个问题。
element.parent().trigger('focus');
element.parent().trigger('focus');
Hope this helps someone!
希望这可以帮助某人！
回答by Matt Bindoff
The above solutions didn't fix the issue for me when IE8 is refreshed. Also I found some problems where adding a stylesheet would break the IE8 background size fix backgroundsize.min.htc
当刷新 IE8 时，上述解决方案并没有为我解决问题。我还发现了一些问题，其中添加样式表会破坏 IE8 背景大小修复 backgroundsize.min.htc
So here's what I did:
所以这就是我所做的：
Add ie8 class to html tag:
将 ie8 类添加到 html 标签：
<!--[if IE 8 ]><html class="ie8"><![endif]-->
Add loading class to the body:
将加载类添加到正文：
<body class='loading'>
Override the CSS content attribute only for IE8:
仅为 IE8 覆盖 CSS 内容属性：
<style>
.ie8 .loading .icon:before {
content: '' !important;
}
</style>
Now remove the loading class on DOM ready:
现在删除 DOM 上的加载类准备好：
$( function() {
$('body').removeClass('loading')
} );
Now it works!
现在它起作用了！
回答by lemats
Workaround:
解决方法：
Find stylesheet and reload on document ready if IE8:
如果 IE8，查找样式表并重新加载文档：
Sample HTML:
示例 HTML：
<!DOCTYPE html>
<html>
<head>
<!-- … -->
<link id="base-css" rel="stylesheet" href="/styles.base.css" type="text/css" />
<!-- … -->
</head>
<!-- … -->
</html>
Sample JavaScript:
示例 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;
});
}
回答by rpearce
Based on the answer from @ausi, you can refactor this with jQuery and CoffeeScript down to 4 lines:
根据@ausi 的回答，您可以使用 jQuery 和 CoffeeScript 将其重构为 4 行：
$(document).ready ->
$style = $('<style type="text/css">:before,:after{content:none !important}</style>')
$('head').append $style
setTimeout (-> $style.remove()), 0
or with JavaScript syntax:
或使用 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);
});
回答by user3845138
For me, the problem was simply solved using the declaration !importanton the content attribute.
对我来说，问题只是使用!important内容属性上的声明来解决。
I.e.:
IE：
.icon:before {
content: "\f108" !important;
}
回答by MrMattSim
I had a similar glitch in Chrome. Here is my fix:
我在 Chrome 中遇到了类似的故障。这是我的修复：
setTimeout(function(){
jQuery('head').append('<style id="fontfix">*:before,*:after{}</style>');
},100);
My guess is that the pseudo css styling was rendered before the webfont was ready, which resulted in blank glyphs. After the page loaded, hovering or altering the css in any way caused them to magically appear. So my fix just forces a css update that does nothing.
我的猜测是伪 css 样式是在 webfont 准备好之前呈现的，这导致了空白字形。页面加载后，以任何方式悬停或更改 css 都会使它们神奇地出现。所以我的修复只是强制执行一个什么都不做的 css 更新。
回答by Hanna
Alright, so I've been trying to fix this issue for a while. Weirdly enough the icomoon demo kept working in IE8 but mine never did, even though I felt like I had pretty much the same thing in place. So I started boiling everything down (the icomoon demo as well as my own implementation) and what I found two things that needed to be there for this to work.
好的，所以我一直在努力解决这个问题。奇怪的是，icomoon 演示继续在 IE8 中运行，但我的从未运行过，尽管我觉得我已经安装了几乎相同的东西。因此，我开始将所有内容（icomoon 演示以及我自己的实现）都简化了，我发现需要具备两件事才能使其发挥作用。
First, I found that I needed to keep the cachebuster on the filename.
首先，我发现我需要在文件名上保留缓存破坏器。
So in my implementation I had:
所以在我的实现中，我有：
@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;
}
But what I needed was:
但我需要的是：
@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;
}
Second, and this one doesn't make sense, is that I needed something in the stylesheet that had a :hoverpseudo selector. It doesn't matter what it's on or what the rules for it are, it just needed something and then the icons would appear when I hovered over them.
其次，这个没有意义，是我需要样式表中包含:hover伪选择器的东西。不管它是什么或它的规则是什么，它只需要一些东西，然后当我将鼠标悬停在它们上面时图标就会出现。
So I simply inserted [data-icon]:hover{}into my CSS stylesheet (just like that, without any rules).
所以我只是插入[data-icon]:hover{}到我的 CSS 样式表中（就像那样，没有任何规则）。
I wish I could explain to you why this works, but I don't understand. My best guess is that this triggers some sort of refresh in IE8 and causes the icons to show up.
我希望我能向你解释为什么这有效，但我不明白。我最好的猜测是这会触发 IE8 中的某种刷新并导致图标显示。
