Demo: http://jsfiddle.net/waitinforatrain/9JU5b/ http://jsfiddle.net/waitinforatrain/9JU5b/
I'm trying to make a notification icon thing that looks like this:
It's a div
背景图片上有文字,所以 HTML 就是:
<div id="notification">
123
</div>
FF和Chrome在文字上有两点不同:
我已将字体设置为 15px Arial 粗体,但它在 Firefox 中看起来比在 Chrome 中“更粗”。我如何使其一致?
I set text-align: center
并使用text-indent: -1px
修复水平对齐,并弄乱line-height
直到垂直对齐正确。然而,水平和垂直对齐方式在 Firefox 中均处于关闭状态。如何使缩进一致?
你无法修复1.
造成差异的原因是 Firefox 使用“DirectWrite”——一种与 Chrome 不同的文本呈现技术。
在这里阅读更多内容:http://www.basschouten.com/blog1.php/font-rendering-gdi-versus-directwrite 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/ http://blog.mozilla.com/nattokirai/2011/08/11/directwrite-text-rendering-in-firefox-6/
To fix 2,尝试设置一个line-height
in px
(20px
看起来不错)。要固定水平对齐,请删除text-indent
并调整width
轻微地 (28px
看起来不错)。
您还应该在文本周围添加更多的间距。我认为这个快速模型看起来更好:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)