Web开发者助手 FeHelper

   做前端的，对web界面基本都抠的很仔细，尤其精确到1px！

   类似边距、宽度、高度等的，调整1px并不难，但是如果遇到不同字体的情况，要处理line-height，保证每种字体下，UI效果都非常美观，这就不是一件简单的事情了！

   也许大家首先能想到的是，字体嘛，默认给页面body节点设置一个font-family列表即可：    

body {
    font-size: 12px;
    font-family:"Microsoft Yahei", "微软雅黑", 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下的样式进行复写

   实现：

       只要这一切都分析好了，要实现，就很简单了，核心的部分代码就是：