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 ，请尝试在px设置line-height （ 20px看起来不错）。 要修复水平对齐，请删除text-indent并稍微调整width （ 28px看起来不错）。

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