Firefox / Chrome上的字体大小和缩进不一致 [英] Inconsistent font size and indentation on Firefox/Chrome

问题描述

演示：

并阅读这一点，特别是提示和间距差异部分： http://blog.mozilla.com/nattokirai/2011/08/11/directwrite-text-rendering-in-firefox-6/

要解决 2 ，请尝试在 px （<$ c $）中设置 line-height c> 20px 看起来不错）。要修复水平对齐，请删除文本缩进并稍微调整 width （ 28px 看起来不错。）

您还应该在文本周围添加一些空格。我认为这个快速模型看起来更好：

Demo: http://jsfiddle.net/waitinforatrain/9JU5b/

I'm trying to make a notification icon thing that looks like this:

It's a div with a background image that has text over it, so the HTML is just:

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

There are two differences in the text between FF and Chrome:

1. I've set the font to 15px Arial bold, but it looks "bolder" in Firefox than in Chrome. How do I make that consistent?

2. I set text-align: center and used text-indent: -1px to fix the horizontal alignment, and messed with the line-height until the vertical alignment was correct. However, both the horizontal and vertical alignments are off in Firefox. How do I make the indentation consistent?

解决方案

You can't fix 1.

The reason for the differences is that Firefox uses "DirectWrite" - a different technique to render text than Chrome does.

Read more here: http://www.basschouten.com/blog1.php/font-rendering-gdi-versus-directwrite

And read this, particularly the "Hinting and spacing differences" section: http://blog.mozilla.com/nattokirai/2011/08/11/directwrite-text-rendering-in-firefox-6/

To fix 2, try setting a line-height in px (20px looks good). To fix the horizontal alignment, remove the text-indent and adjust the width slightly (28px looks good).

You should also add a bit more spacing around the text. I think this quick mockup looks better:

这篇关于Firefox / Chrome上的字体大小和缩进不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！