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

演示：

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

它是一个

div

，背景图像上有文本，因此HTML只是：

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

123

FF和Chrome之间的文本有两个区别：

我已经将字体设置为15px Arial粗体，但在Firefox中看起来比在Chrome中更“粗体”。我如何使其一致

我设置了

text align:center

，并使用

text indent:-1px

来固定水平对齐，并修改了

行高度，直到垂直对齐正确。然而，在Firefox中，水平和垂直对齐都是关闭的。如何使缩进一致

---

无法修复1

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

请在此处阅读更多信息：

阅读以下内容，尤其是“暗示和间距差异”部分：

要修复2，请尝试在

px

中设置

行高（
20px
看起来不错）。要固定水平对齐，请删除
文本缩进
并稍微调整
宽度（
28px
看起来不错）

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

Chome和Firefox在Linux中的显示方式似乎完全相同。我只是在windows中尝试过，但我看不出Firefox和Chrome之间有什么明显的区别。我还测试了Opera和Safari，它们在我看来是一样的。甚至是缩进？在Win7下的FF6上，水平缩进减少1px，垂直缩进增加1px。好的，如果我删除文本缩进规则，它似乎只影响Chrome（Linux）。“粗体”的区别我看不出来。@lepe:这是Windows唯一的东西。Snap，刚回来编辑，我把它改成了px，我想这是四舍五入的区别吧？将宽度更改为偶数也是一个舍入问题吗？是的，我想这是一个舍入问题，因为他们处理它的方式略有不同。我有一个大文本（50px）的问题。“字体重量”设置为800，对于MOZ和IE9，我将重量更改为700。我用它在CSS中格式化