[英]Inconsistent font size and indentation on Firefox/Chrome
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
with a background image that has text over it, so the HTML is just: 它是一个带有背景图像的
div
,上面有文本,因此HTML只是:
<div id="notification">
123
</div>
There are two differences in the text between FF and Chrome: FF和Chrome之间的文字有两点不同:
I've set the font to 15px Arial bold, but it looks "bolder" in Firefox than in Chrome. 我已经将字体设置为15px Arial粗体,但它在Firefox中比在Chrome中看起来“更大胆”。 How do I make that consistent?
我该如何保持一致?
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. 我设置
text-align: center
并使用text-indent: -1px
来修复水平对齐,并与line-height
混淆,直到垂直对齐正确。 However, both the horizontal and vertical alignments are off in Firefox. 但是,Firefox中的水平和垂直对齐都处于关闭状态。 How do I make the indentation consistent?
如何使缩进保持一致?
You can't fix 1 . 你无法修复1 。
The reason for the differences is that Firefox uses "DirectWrite" - a different technique to render text than Chrome does. 造成差异的原因是Firefox使用“DirectWrite” - 一种与Chrome相比渲染文本的技术。
Read more here: http://www.basschouten.com/blog1.php/font-rendering-gdi-versus-directwrite 在这里阅读更多内容: 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/ 并阅读此内容,特别是“提示和间距差异”部分: 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). 要修复2 ,请尝试在
px
设置line-height
( 20px
看起来不错)。 To fix the horizontal alignment, remove the text-indent
and adjust the width
slightly ( 28px
looks good). 要修复水平对齐,请删除
text-indent
并稍微调整width
( 28px
看起来不错)。
You should also add a bit more spacing around the text. 您还应该在文本周围添加更多的间距。 I think this quick mockup looks better:
我认为这个快速模型看起来更好:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.