Chrome 和 FF 中的 Verdana 不同渲染

Verdana different rendering in Chrome and FF

注意:此问题在 windows。

我发现我当前网站的文本在 Chrome 和 FF 中显示不同。字体是 Verdana。同样的词在 FF 中看起来比在 Chrome 中更宽。我找不到原因,所以我开始搜索也使用Verdana的网站。

我找到了 this site that uses Verdana for side navigation. The links look different in Chrome and FF as well. (Screenshot in chrome, in FF).

但后来我发现 this site 其中的文字也是 Verdana。但是在这个网站上,文本在 Chrome 和 FF?

中看起来一样

为什么会发生这种情况以及如何使 Verdana 文本在这两个浏览器中看起来相同。

UPD: 我在 jsbin 中添加了展示。 (我认为如果我提供指向您可以看到问题的真实站点的链接,那就更真实了)。打开Chrome和FF中的jsbin文件,运行js打开控制台。你可以看到 div 的宽度在 FF 中是 53 而在 Chrome - 49.

问题是您将字体缩小到非常小的程度,即 impossible to get right:每个字体引擎的像素对齐方式都不同,因此 Firefox、IE 和 Chrome 都会你做的东西越小,开始显示不同的指标,因为它们都使用不同的字体引擎。

坚持建议的最小值 16px 和更高,并且浏览器报告相同的尺寸; http://jsbin.com/caxasahacu/edit?html,css,js,console,output

(请记住,并非每个人都有敏锐的视力。对于绝大多数用户而言,16px 是 pretty much the smallest 您可以在强迫人们缩放之前可靠地制作文本)