Firefox/Chrome 上的字体大小和缩进不一致答案

【问题标题】：Inconsistent font size and indentation on Firefox/ChromeFirefox/Chrome 上的字体大小和缩进不一致
【发布时间】：2011-11-01 13:56:35
【问题描述】：

我正在尝试制作一个如下所示的通知图标：

这是一个div，其背景图像上带有文本，因此 HTML 只是：

<div id="notification">
    123
</div>

FF和Chrome的文字有两处不同：

我已将字体设置为 15 像素 Arial 粗体，但它在 Firefox 中看起来比在 Chrome 中“粗”。我如何做到这一点？
我设置text-align: center 并使用text-indent: -1px 来修复水平对齐，并与line-height 混淆，直到垂直对齐正确为止。但是，Firefox 中的水平和垂直对齐方式都是关闭的。如何使缩进保持一致？

【问题讨论】：

Linux 中的 Chome 和 Firefox 似乎以完全相同的方式显示它。
我刚刚在 Windows 中尝试过，我看不出 Firefox 和 Chrome 之间有明显的区别。我还测试了 Opera 和 Safari，它们在我看来是一样的。
甚至缩进？在 Win7 下的 FF6 上，它的水平缩进少 1px，垂直缩进多 1px。
好的，如果我删除 text-indent 规则，它似乎只影响 Chrome (Linux)。我无法看到“更大胆”的差异。
@lepe：这是 Windows 独有的东西。

【解决方案1】：

您无法修复1。

差异的原因在于 Firefox 使用“DirectWrite”——一种与 Chrome 不同的文本呈现技术。

要修复2，请尝试在px 中设置line-height（20px 看起来不错）。要修复水平对齐，请移除text-indent 并稍微调整width（28px 看起来不错）。

您还应该在文本周围添加更多间距。我认为这个快速模型看起来更好：

【讨论】：

Snap，刚回来编辑，我把它改成了px，我想这是四舍五入的不同吗？将宽度更改为偶数是否也是舍入问题？
是的，我想这是一个四舍五入的问题，因为它们的处理方式略有不同。
我遇到了大文本（50px）的问题。 'font-weight' 设置为 800，对于 MOZ 和 IE9，我将粗细更改为 700。我用它来格式化我的 CSS stackoverflow.com/a/3387859/684966