你的位置:首页 > 软件开发 > Java > 老爷车IE8如何兼容图标字体

老爷车IE8如何兼容图标字体

发布时间:2015-11-27 17:01:39
前言首先这个标题再详细的说就是如何解决font-face在IE8下间歇性出现图标字体渲染失败的解决方案。如果你还不知道什么是图标字体,可以先阅读:链接1,链接2,链接3先看在IE8下的问题: 而正常的应该是这样:可以看到所以图标都显示不了,最关键的是还显示出他本身的字符,这绝 ...

老爷车IE8如何兼容图标字体

前言

首先这个标题再详细的说就是如何解决font-face在IE8下间歇性出现图标字体渲染失败的解决方案

如果你还不知道什么是图标字体,可以先阅读:链接1,链接2,链接3

先看在IE8下的问题:

老爷车IE8如何兼容图标字体

 

正常的应该是这样:

老爷车IE8如何兼容图标字体

可以看到所以图标都显示不了,最关键的是还显示出他本身的字符,这绝对是不能忍的,必须解决。

 

问题的原因到底是什么?

这个页面是为了快速一览图标字体的页面,这两个截图都是在IE8下截图的,所以可以看到font-face不是不兼容IE8,而是间歇性的撂挑子(出问题),至于问题原因:

猜测:是因为字体并不阻塞页面显示,当第一次打开页面,字体文件没有缓存,且字体在页面打开后才载入进来,导致浏览器没有重新渲染页面中使用图标字体的字符,才导致此问题出现的

 

1、搭建测试环境

首先要100%复现问题,确定bug原因。我是win8的开发机,用Oracle VM VirtualBox建立虚拟机,IE6 8 9各一台,现在用IE8测试

老爷车IE8如何兼容图标字体

 

开发环境是Visual Studio 2013,把项目跑起来后,开启Fiddler做虚拟机的代理服务器,也就是将Fiddler作为我的真实机的反向代理服务器,这样可以让虚拟机连接我的真实机的localhost地址,来达到远程VS调试的功能。

当然你可以直接把web文件发布到局域网内网IP,然后虚拟机访问,在本例中是可以的,但是那样VS是无法使用调试(debug)功能的。

老爷车IE8如何兼容图标字体

如上图所示虚拟机成功连接真实的localhost,但目前是没问题的,我们需要利用Fiddler来模拟网络问题。

 

2、用Fiddler模拟网络问题

猜测是字体返回过慢,所以可以利用Fiddler的 BreakPoints ,即断点功能。

使用Fiddler-【Rules】-【Automatic Breakpoints】-【After Response】断点功能。

老爷车IE8如何兼容图标字体

 

启用【After Response】即响应后断点,即响应已经发送至服务器,服务器也将资源返回给Fiddler,此时Fiddler等待其他资源都响应完成后,再返回给浏览器,以人为制造上述猜想的发生场景,过程如下图:

老爷车IE8如何兼容图标字体

顺便一提,在本例中使用【Before Request】也是可以的,因为对于浏览器而言,使用请求前断点和响应后断点都是一样的。

 

接下来在虚拟机中的IE8按Ctrl+F5,强制所有资源均从新加载,在Fiddler中,把所有非字体资源文件都【Run to Completion】通过,转发给浏览器,最后再将字体转发给浏览器。

老爷车IE8如何兼容图标字体

 

3、稳定复现

可以看到,问题又复现了:

老爷车IE8如何兼容图标字体

如果此时关闭断点,再在虚拟机中清空缓存,并按Ctrl+F5 多少次,也无法复现此问题,只要使用Fiddler断点,就可以100%复选次问题。

问题找到了,就是后加载进来无法渲染,想办法强制触发渲染就可以了。

如何解决此问题?

 

解决方案1:加载完成后调整下浏览器大小

大家应该都知道,调整浏览器大小会造成网页重绘回流,会让页面几乎所有元素重新绘制。因为重新绘制样式了,所以自然也就可以了解决图标字体渲染失败的问题。

缺点自然不用说,这等于没解决,不过我们可以利用重绘后图标生效的特性来让强制令其页面回流重绘。

关于不知道什么是回流与重绘的同学可以参考:链接1、链接2

 

解决方案2:强制回流

既然我们要让所有图标字体都生效,那么最好的办法是让页面发生大面积回流,以触发整页重新渲染。那么我们就需要先知道有哪些操作可以导致回流:

以下操作会触发回流:

1、调整窗口大小

2、改变字体

3、增加或者移除样式表

4、内容变化,比如用户在input框中输入文字

5、激活 CSS 伪类,比如 :hover (IE 中为兄弟结点伪类的激活

6、操作 class 属性

7、脚本操作 DOM

8、计算 offsetWidth 和 offsetHeight 属性

9、设置 style 属性的值

10、其他会导致回流的操作

所以就有了以下失败的尝试:

给body顶部插入元素,设定body的宽度,设定绝对定位再设置回来,强制修改font-face的字体再改回来等等,最终解决是没成功,如果各位有什么好办法欢迎留言。

 

解决方案3:重设font-face的伪类内容

最终通过设置 !important 来覆盖所有font-face的css,再重新应用就可以实现了。

代码:

<style>  html.fix-ie-font-face :before,  html.fix-ie-font-face :after {    content: none !important;  }
</style><script>  //重设伪类,使字体强制生效  !(function redrawFontFace() {    if ($.support.leadingWhitespace) return;    $(window).one("load", function() {      console.log("onload!!!!!!!!!!!");      $('html').addClass('fix-ie-font-face');      setTimeout(function() {        $('html').removeClass('fix-ie-font-face');      }, 10);    });  }());</script>

原标题:老爷车IE8如何兼容图标字体

关键词:ie

ie
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。