Verdana 在 Chrome 和 FF 中的不同渲染答案

【问题标题】：Verdana different rendering in Chrome and FFVerdana 在 Chrome 和 FF 中的不同渲染
【发布时间】：2016-05-16 11:21:30
【问题描述】：

注意：此问题在 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 并打开控制台。在 FF 中可以看到 div 的宽度为 53，在 Chrome 中为 49。

【问题讨论】：

请出示证明。对我来说，一个简单的检查显示了 Windows 7 上 FF 和 Chrome 之间的相同渲染。 imgur.com/h6JDQnx -- 另外，展示你的研究。到目前为止你调查了什么？如果您只是在文档中有一个带有样式文本的元素，您是否尝试过一个最小的案例来确定您所说的是否正确？基本上，你在关注the guidelines on asking a good question 吗？
@Mike'Pomax'Kamermans 抱歉，但根据我以前的经验，如果我展示真正的问题会更好。没有代表一个。另外，我不明白为什么显示文本块宽度的屏幕截图以及在浏览器中明显不同的屏幕截图不能作为证明。但是，我添加了一个 jsbin sn-p，其中 js 显示了文本块的宽度。我认为现在已经足够了。
如果您没有代码，请显示图片，然后尝试将示例减少到最少的代码并添加它。请记住，您是在要求人们花费自己的时间来帮助您，他们可能会更好地利用这些时间来帮助您，因此您要确保他们不需要寻找信息。
@Mike'Pomax'Kamermans “显示图片” - 我显示来自 FF 和 Chrome 的屏幕截图。他们怎么了？我需要 10 秒才能在 FF 和 Chrome 中打开开发者工具并查看发生了什么。

【解决方案1】：

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

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

（请记住，并非每个人都有鹰眼。对于绝大多数用户来说，16px 是pretty much the smallest，您可以在强迫人们放大之前可靠地制作文本）

【讨论】：

奇怪，我以为这个问题只是 Verdana 字体。当我使用小于 16 px 的其他字体（如 Arial）时，它看起来是一样的。此外，例如，Verdana 中的 15px 接近 Arial 中的 16px。我看到很多网站使用小于 16 像素的字体。但这是一个值得记住的有用问题。