Firefox&Chrome在字体渲染的时刻会存在一些差异，比如对font-weight的渲染。见多识广的我之前不时没留意，为了更清楚的说明疑问，我做了以下测试。

首先，咱们对一个元素（比如：span）只设置字号（比如：16px），再输入一段测试文案（如：我是一段测试文本。），而后区分在Firefox和Chrome阅读器中预览成果，并经过上方的代码检查标签的宽高：

varsp=document.getElementById("J_Span");varshowSize=functiON(node){alert("Width:"+node.offsetWidth+"px\nHeight:"+node.offseTheight+"px");};showSize(sp);

这时咱们会区分获取上方这个结果：

//ChromeWidth:144pxHeight:16px//FirefoxWidth:144pxHeight:18px

这时咱们发如今高度上曾经有差异了，由于行内元素不可设置高度，所以我大胆的疏忽了是设置高度造成的差异，那么会不会是由于line-height造成高度差异呢？为了获取验证我给标签参与了line-height:18px;，再次口头，发现运转结果并没有扭转。

至此，咱们还没进入主题——对font-weight的测试。接上去咱们继续给标签参与样式：

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

我能再次运转，区分获取以下结果：

//ChromeWidth:147pxHeight:16px//FirefoxWidth:153pxHeight:18px

这下宽度上的差异就很清楚了。短短9个字的宽度就发生了这么大的差异，假设是几十个文本的一行，前端规划形成的影响可想而知。难道是两个阅读器对的解析存在差异，是不是改成详细数值就好了？为此我有调整了样式，将font-weight:bold;改成了font-weight:600;，但是结果却还是没有获取扭转。

想了半天还是找不到处置方法，突然间灵光一闪，是不是一切字体都会有这种现象呢？于是我又继续参与样式，参与字体设置：

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

我再次在阅读器中运转，这次的运转结果却有些出人预料：

//ChromeWidth:144pxHeight:21px//FirefoxWidth:144pxHeight:22px

宽度上的差异隐没了，而高度上的差异也有清楚改善。由此对比咱们可以推断：Firefox&Chrome关于自动字体的渲染存在一些差异，而关于其余少数字体的渲染没有清楚差异。为了验证这一推断，我又改换了字体尝试：

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

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

总结，当咱们对网页字体启动设置的时刻，假设经常使用的是系统自动字体（windows下普通为宋体），那么对粗体的设置须要留心。

标签： HTML5、 Chrome自动字体的渲染差异、 CSS3、 Firefox&、

本文地址： https://yihaiquanyi.com/article/0b1fe425d1ce337df378.html

上一篇：网站设计百度百科网站设计厦门网站树立网站...
下一篇：厦门网站建设方案厦门网站树立厦门网站提升...