Firefox&Chrome默认字体的渲染差异

Firefox&Chrome在字体渲染的时候会存在一些差异，比如对 font-weight 的渲染。孤陋寡闻的我之前一直没注意，为了更清楚的说明问题，我做了以下测试。

首先，我们对一个元素（比如：span）只设置字号（比如：16px），再输入一段测试文案（如：我是一段测试文本。），然后分别在Firefox和Chrome浏览器中预览效果，并通过下面的代码查看标签的宽高：

var sp = document.getElementById("J_Span");
var showSize = function(node){
    alert("Width: " + node.offsetWidth + "px\nHeight: " + node.offsetHeight + "px");
};
showSize(sp);

这时我们会分别得到下面这个结果：

// Chrome
Width: 144px
Height: 16px

// Firefox
Width: 144px
Height: 18px

这时我们发现在高度上已经有差异了，因为行内元素无法设置高度，所以我大胆的忽略了是设置高度导致的差异，那么会不会是因为 line-height 导致高度差异呢？为了得到验证我给 span 标签添加了 line-height: 18px;，再次执行，发现运行结果并没有改变。

至此，我们还没进入主题——对 font-weight 的测试。接下来我们继续给 span 标签添加样式：

.demo {
    font-size: 16px;
    line-height: 18px;
    font-weight: bold;
}

我能再次运行，分别得到以下结果：

// Chrome
Width: 147px
Height: 16px

// Firefox
Width: 153px
Height: 18px

这下宽度上的差异就很明显了。短短9个字的宽度就产生了这么大的差异，如果是几十个文本的一行，前端布局造成的影响可想而知。难道是两个浏览器对 bold 的解析存在差异，是不是改成具体数值就好了？为此我有调整了样式，将 font-weight: bold; 改成了 font-weight: 600;，然而结果却还是没有得到改变。

想了半天还是找不到解决办法，忽然间灵光一闪，是不是所有字体都会有这种现象呢？于是我又继续添加样式，增加字体设置：

.demo {
    font-family: '微软雅黑', sans-serif;
    font-size: 16px;
    line-height: 18px;
    font-weight: 600;
}

我再次在浏览器中运行，这次的运行结果却有些出乎意料：

// Chrome
Width: 144px
Height: 21px

// Firefox
Width: 144px
Height: 22px

宽度上的差异消失了，而高度上的差异也有明显改善。由此对比我们可以推断：Firefox&Chrome对于默认字体的渲染存在一些差异，而对于其他多数字体的渲染没有显著差异。为了验证这一推断，我又更换了字体尝试：

.demo {
    font-family: '幼圆', sans-serif;
    font-size: 16px;
    line-height: 18px;
    font-weight: 600;
}

我还依次改为 华文行楷、黑体 等进行验证。果然测试结果都是OK的。

总结，当我们对网页字体进行设置的时候，如果使用的是系统默认字体（Windows下一般为宋体），那么对粗体的设置需要留心。