Verdana在Chrome和FF中的不同渲染

Question

注意：此问题出现在Windows上。

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

我发现this site使用Verdana进行侧面导航。 Chrome和FF中的链接看起来也不同。 （屏幕截图in chrome，in FF）。

但后来我发现this site文本也在Verdana中。但是在这个网站上，Chrome和FF中的文字看起来是一样的吗？

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

UPD：我在jsbin中添加了展示广告。 （我认为如果我链接到可以看到问题的真实网站，那就更真实了）。在Chrome和FF中打开jsbin文件，运行js并打开控制台。你可以看到div的宽度为FF，文字为53，而Chrome为49。

Answer 1

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

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

（请记住，不是每个人都有鹰视觉。对于绝大多数用户来说，16px是pretty much the smallest，你可以在强迫人们缩放之前可靠地制作文字。