界面字体兼容方案

检测是否安装了某种字体：

   1、IE浏览器中，通过创建<object classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b"></object>，直接访问系统的字体库，读取字体列表，判断某种字体是否存在            

if(qing.browser.ie){
    _dlgHelper = qing.dom.create('object',{
        id      : "sp-font-detect-obj",
        classid : "clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b"
    });
    qing.dom.setStyles(_dlgHelper,{
        "position": "absolute",
        "top": "-10000px",
        "left": "-10000px",
        "width" : "1px",
        "height" : "1px"
    });
    document.body.appendChild(_dlgHelper);
    _isInitialedInIE = true;
}
//IE中，用object的classid来判断字体
if(qing.browser.ie) {
    if(!_isInitialedInIE) {
        init();
    }
    var sysFonts = _dlgHelper.fonts;
    if(sysFonts.count) {
        for(var i = 1,len = sysFonts.count;i <= len;i++){
            if(isInArray(sysFonts(i),familys)) {
                return callback(true);
            }
        }
    }
    return callback(false);
}
 

    2、非IE的浏览器中，创建一个span标签，再插入一段字符，设置很大的字号和默认字体（预计所有机器都有的“Times New Roman”），获取到span的offsetWidth；再给span追加一个待检测的字体，再获取其offsetWidth；两个width进行比较，如果相同，则表明用户机器没有这种字体，否则表明用户机器确实安装了这种字体！

var checkOffsetWidth = function(family){     var node = document.createElement("p");     qing.dom.setStyles(node, {         "font-family":  family + ", Times New Roman",         "font-size": '300pt',         "display": "inline",         "position": "absolute",         "top": "-10000px",         "left": "-10000px"     });     qing.dom.addClass(node, "sp-font-detect");     node.innerHTML = "mmmmmmmmml";     document.body.appendChild(node);        var width = node.offsetWidth;     document.body.removeChild(node);     return width; };

 

var getDefaultWidth = function(){     if (!_defaultWidth)         _defaultWidth = checkOffsetWidth("Times New Roman");     return _defaultWidth; };

 

//非IE浏览器中，用比较宽度的方法来判断 else{     var familyWidth = 0;     var defaultWidth = getDefaultWidth();     for(var j = 0,flen = familys.length;j < flen;j++){         familyWidth = checkOffsetWidth(familys[j]);         if(familyWidth !== defaultWidth){             return callback(true);         }     }     return callback(false); }

   2、检测是否开启ClearType

       a、IE下，直接通过screen.fontSmoothingEnabled获取

       b、非IE下，创建canvas，画一条粗线，然后获取并分析该DataURI数据

var isClearTypeOn = function() {
    if(typeof screen.fontSmoothingEnabled!="undefined")
        return screen.fontSmoothingEnabled;
    else
        try {
            var f=document.createElement("canvas");
            f.width="35";
            f.height="35";
            f.style.display="none";
            document.body.appendChild(f);
            var o=f.getContext("2d");
            o.textBaseline="top";
            o.font="32px Arial";
            o.fillStyle="black";
            o.strokeStyle="black";
            o.fillText("E",0,0);
            for(var r=8;r<=32;r++)
                for(var u=1;u<=32;u++) {
                    var q=o.getImageData(u,r,1,1).data[3];
                    if(q != 255 && q != 0) {
                        document.body.removeChild(f);
                        return true
                    }
                }
            document.body.removeChild(f);
            return false
        } catch(y) {
            return null
        }
};

 

   3、在css中定义“其他字体情况下，样式的修复方案”

 

body, button, input, select, textarea , pre {
    font-size: 12px;
    font-family:"Microsoft Yahei", "微软雅黑", Tahoma, Arial, Helvetica, STHeiti;
    _font-family:Tahoma,Arial,Helvetica,STHeiti;
}
html.mod-without-msyahei body {
    font-family: Tahoma,Arial,Helvetica,STHeiti;
}
/****************系统默认支持雅黑的处理**********************/
.mod-without-msyahei .mod-blogitem .a-expand-reason{
    background-position-y:-15px;
}
.mod-without-msyahei .mod-blogitem .a-collapse-reason{
    background-position-y:3px;
}
.mod-without-msyahei .mod-blogitem .box-tag .q-tag{
    _padding:5px 3px 1px;
}
.mod-without-msyahei .mod-blogitem .item-head .q-private {
    line-height:23px;
    _padding-top:3px;
}
 

   4、在页面上，调用detect方法进行字体检测，并进行样式纠偏

var _fontDetect = function(){

    qext.FontDetect.detect(['微软雅黑','Microsoft Yahei'],function(isExist){

        //获得html节点

        var htmlElm = qing.dom.query('html')[0];

        //开启clearType并存在雅黑字体

        if(isExist){

            qing.dom.addClass(htmlElm,'mod-with-msyahei');

        }else{

            qing.dom.addClass(htmlElm,'mod-without-msyahei');

        }

    });

};

转载于:https://my.oschina.net/u/3687760/blog/1538229