转载

【原创】Firefox&Chrome默认字体的渲染差异

好久没写博客了，博客已死的感觉。今天记录一个简单的问题，证明博客还活着。最近发现一个奇怪的问题：Firefox&Chrome在字体渲染的时候会存在一些差异，比如对 font-weight 的渲染。孤陋寡闻的我之前一直没注意，为了更清楚的说明问题，我做了以下测试。

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

JavaScript

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 标签添加样式：

CSS

.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 ; ，然而结果却还是没有得到改变。

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

CSS

.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对于默认字体的渲染存在一些差异，而对于其他多数字体的渲染没有显著差异。为了验证这一推断，我又更换了字体尝试：

CSS

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

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

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

正文到此结束

所属分类：编程技术

本文标签： CSS 文案总结 ip Chrome node Document windows 解析测试代码 java 微软
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

【原创】Firefox&Chrome默认字体的渲染差异

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流