Несовместимый размер шрифта и отступ в Firefox / Chrome - PullRequest
Новая
       40

Несовместимый размер шрифта и отступ в Firefox / Chrome

4 голосов
/ 23 августа 2011

Демо: http://jsfiddle.net/waitinforatrain/9JU5b/

Я пытаюсь создать значок уведомления, который выглядит следующим образом: enter image description here

Это div с фоновым изображением, на котором есть текст, поэтому HTML просто: 

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

Есть два отличия в тексте между FF и Chrome:

  1. Я установил шрифт на 15px Arial жирным шрифтом, но в Firefox он выглядит более смелым, чем в Chrome. Как мне сделать это согласованным?

  2. Я установил text-align: center и использовал text-indent: -1px, чтобы зафиксировать горизонтальное выравнивание, и путался с line-height, пока вертикальное выравнивание не было правильным. Однако горизонтальное и вертикальное выравнивание в Firefox отключено. Как сделать отступ соответствующим?

1 Ответ

4 голосов
/ 23 августа 2011

Вы не можете исправить 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 выглядит хорошо).

Вы также должны добавить немного больше интервала вокруг текста. Я думаю, что этот быстрый макет выглядит лучше:

...