你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
MrZheng

Firefox&Chrome默认字体的渲染差异 1个回复 专栏 @ CSS

MrZheng 发布于 2 年前

好久没写博客了,博客已死的感觉。今天记录一个简单的问题,证明博客还活着。最近发现一个奇怪的问题: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下一般为宋体),那么对粗体的设置需要留心。

作者博客:百码山庄

  • 李诺123321

    赞,不过我们的项目已经全站换成“微软雅黑”和“冬青黑体”了,好久没用“宋体”了

    #1
登录后回复,如无账号,请使用邀请码注册