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

前言

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

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

先看在IE8下的问题：

//jquery-1.9.1.js #885
jQuery.ready.promise = function( obj ) {
if ( !readyList ) {

readyList = jQuery.Deferred();

// Catch cases where $(document).ready() is called after the browser event has already occurred.
// we once tried to use readyState "interactive" here, but it caused issues like the one
// discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15 if ( document.readyState === "complete" ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
setTimeout( jQuery.ready );

// Standards-based browsers support DOMContentLoaded
} else if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", completed, false );

// A fallback to window.onload, that will always work
window.addEventListener( "load", completed, false );

// If IE event model is used
} else {
// Ensure firing before onload, maybe late but safe also for iframes
document.attachEvent( "onreadystatechange", completed );

// A fallback to window.onload, that will always work
window.attachEvent( "onload", completed );

// If IE and not a frame
// continually check to see if the document is ready
var top = false;

try {
top = window.frameElement == null && document.documentElement;
} catch(e) {}

if ( top && top.doScroll ) {
(function doScrollCheck() {
if ( !jQuery.isReady ) {

try {
// Use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/ top.doScroll("left");
} catch(e) {
return setTimeout( doScrollCheck, 50 );
}

// detach all dom ready events
detach();

// and execute any waiting functions
jQuery.ready();
}
})();
}
}
}
return readyList.promise( obj );
};

$.ready的源码

其他问题

1、IE8下图标字体非常有锯齿感怎么解决？如图





解决方案：做一张1*1大小的透明PNG图，然后给所有的图标字体的类样式增加IE特有的 filter 属性，如下：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/IEfix.png, sizingMethod=crop);
zoom: 1;

增加滤镜后效果：





图标看上去还算说得过去，至于文字的锯齿，不是本文探讨的范围内，辣个要去电脑中设置了。

缺点就是会降低页面打开速度，增加页面CPU占用量，会让页面变卡，当然前提是你页面使用了太多图标字体。

2、待补充…

代码下载

本文代码已托管至Github：

https://github.com/xxcanghai/cnblogsFiles/tree/master/fix-IE-bootstrap-font-face

扩展阅读

1、页面重绘和回流以及优化

2、回流与重绘：CSS性能让JavaScript变慢？

3、IE8 CSS @font-face fonts only working for :before content on over and sometimes on refresh/hard refresh

4、再不知道字体图标就落伍啦！

5、Font Awesome

（完）

原文地址-http://www.cnblogs.com/xxcanghai/p/5000984.html