web界面上的字体兼容方案
原贴地址：http://www.baidufe.com/item/60cd11d3bfdee5c51369.html
做前端的，对web界面基本都抠的很仔细，尤其精确到1px！
类似边距、宽度、高度等的，调整1px并不难，但是如果遇到不同字体的情况，要处理line-height，保证每种字体下，UI效果都非常美观，这就不是一件简单的事情了！
也许大家首先能想到的是，字体嘛，默认给页面body节点设置一个font-family列表即可：
body{
font-size:12px;
font-family:"MicrosoftYahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti;
}
但其实问题并没有这么简单,font-family列表是必然要设置的，但这个列表的具体解析，只有浏览器自己才知道，如果coder们不在这个基础上做点儿什么，是完全不知道某个用户浏览到的这个页面究竟应用到了那种字体、此时的页面排版是否美观、页面有没有出现文字很拥挤的情况、给某个节点设置的背景icon是否对其了？
等等，各种问题，各种猜测。。。
实际开发中，这也确实是一个问题，作为专业coder，是需要兼容各个细节的，包括这里的字体控制。
任务：
利用Javascript编写一个组件，用于检测某用户浏览页面时，浏览器应用到了那种字体（以微软雅黑为例）。
问题：
1、用户机器未安装雅黑字体时，需要用别的字体替代，并且要对其他样式进行修正
2、用户机器安装了雅黑字体时：
a、用户机器未开启ClearType时，雅黑字体显示出来会有锯齿，此时依然要将页面字体设置为默认，并同样对其他样式进行修正
b、用户机器开启了ClearType时，按照正常的模式进行渲染，不需要对其他样式进行修正
方法：
1、页面开始渲染时，检测用户机器上是否安装了雅黑字体
2、检测用户机器是否开启了ClearType
3、如果一切如愿，给html节点增加class="ms-with-yahei"，否则增加class="ms-without-yahei"
4、样式修正：对html.ms-without-yahei下的样式进行复写
实现：
只要这一切都分析好了，要实现，就很简单了，核心的部分代码就是：
1、检测用户机器是否安装了某种字体：
a、IE浏览器中，通过创建，直接访问系统的字体库，读取字体列表，判断某种字体是否存在
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();
}
varsysFonts=_dlgHelper.fonts;
if(sysFonts.count){
for(vari=1,len=sysFonts.count;i<=len;i++){
if(isInArray(sysFonts(i),familys)){
returncallback(true);
}
}
}
returncallback(false);
}
b、非IE的浏览器中，创建一个span标签，再插入一段字符，设置很大的字号和默认字体（预计所有机器都有的“TimesNewRoman”），获取到span的offsetWidth；再给span追加一个待检测的字体，再获取其offsetWidth；两个width进行比较，如果相同，则表明用户机器没有这种字体，否则表明用户机器确实安装了这种字体！
/
检查字体宽度
@param{Object}family
/
varcheckOffsetWidth=function(family){
varnode=document.createElement("p");
qing.dom.www.wang027.comsetStyles(node,{
"font-family":family+",TimesNewRoman",
"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);
varwidth=node.offsetWidth;
document.body.removeChild(node);
returnwidth;
};
/
获取文字实际宽度
/
vargetDefaultWidth=function(){
if(!_defaultWidth)
_defaultWidth=checkOffsetWidth("TimesNewRoman");
return_defaultWidth;
};
//非IE浏览器中，用比较宽度的方法来判断
else{
varfamilyWidth=0;
vardefaultWidth=getDefaultWidth();
for(varj=0,flen=familys.length;jfamilyWidth=checkOffsetWidth(familys[j]);
if(familyWidth!==defaultWidth){
returncallback(true);
}
}
returncallback(false);
}
2、检测用户机器是否开启了ClearType
a、IE下，直接通过screen.fontSmoothingEnabled获取
b、非IE下，创建canvas，画一条粗线，然后获取并分析该DataURI数据
/
是否开启了clearType
@functionisClearTypeOn
@return{Boolean}如果支持，显示true；否则返回false
/
varisClearTypeOn=function(){
if(typeofscreen.fontSmoothingEnabled!="undefined")
returnscreen.fontSmoothingEnabled;
else
try{
varf=document.createElement("canvas");
f.width="35";
f.height="35";
f.style.display="none";
document.body.appendChild(f);
varo=f.getContext("2d");
o.textBaseline="top";
o.font="32pxArial";
o.fillStyle="black";
o.strokeStyle="black";
o.fillText("E",0,0);
for(varr=8;r<=32;r++)
for(varu=1;u<=32;u++){
varq=o.getImageData(u,r,1,1).data[3];
if(q!=255&&q!=0){
document.body.removeChild(f);
returntrue
}
}
document.body.removeChild(f);
returnfalse
}catch(y){
returnnull
}
};
3、在css中定义“其他字体情况下，样式的修复方案”
body,button,input,select,textarea,pre{
font-size:12px;
font-family:"MicrosoftYahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti;
_font-family:Tahoma,Arial,Helvetica,STHeiti;
}
html.mod-without-msyaheibody{
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:5px3px1px;
}
.mod-without-msyahei.mod-blogitem.item-head.q-private{
line-height:23px;
_padding-top:3px;
}
4、在页面上，调用detect方法进行字体检测，并进行样式纠偏
/
字体监测
@return{[type]}
/
var_fontDetect=function(){
qext.FontDetect.detect([''微软雅黑'',''MicrosoftYahei''],function(isExist){
//获得html节点
varhtmlElm=qing.dom.query(''html'')[0];
//开启clearType并存在雅黑字体
if(isExist){
qing.dom.addClass(htmlElm,''mod-with-msyahei'');
}else{
qing.dom.addClass(htmlElm,''mod-without-msyahei'');
}
});
}; |
|
