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

Question

更新:我写了一篇博文,讲述了我对这个问题的了解.我仍然不完全理解它,但希望有人会读到这个并阐明我的问题: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'}之前,但我不知道错误是什么.

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

如果我能提供可能有用的信息,请告诉我.

编辑:更新了博客文章的断开链接.

Answer 1

我有同样的错误.

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

Answer 2

我最近也遇到过这种情况,并通过在我的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

Answer 3

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

这些图标使用以下方式实现:after和:之前使用IE7支持,就像这样.

就我而言,该项目是用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]-->

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

Answer 4

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

element.parent()触发( '焦点');

希望这有助于某人!

Answer 5

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