【原创】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下通常为宋体），那么对粗体的设置须要留心。

做者博客：百码山庄