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

Question

演示：http://jsfiddle.net/waitinforatrain/9JU5b/

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

这是div，背景图片上有文字，所以HTML只是：

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

FF和Chrome之间的文字有两点不同：

1. 我将字体设置为15px Arial粗体，但在Firefox中看起来比在Chrome中看起来“更大胆”。我该如何保持一致？

2. 我设置text-align: center并使用text-indent: -1px来修复水平对齐，并与line-height混淆，直到垂直对齐正确为止。但是，Firefox中的水平和垂直对齐都处于关闭状态。如何使缩进保持一致？

Answer 1

您无法修复 1 。

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

在此处阅读更多内容：http://www.basschouten.com/blog1.php/font-rendering-gdi-versus-directwrite

请阅读此内容，特别是“提示和间距差异”部分：http://blog.mozilla.com/nattokirai/2011/08/11/directwrite-text-rendering-in-firefox-6/

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

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