Вертикальное выравнивание шрифтов WebKit и Mozilla в поле

Glyphs in Box

Это тестовое изображение показывает, как сильно отличающийся текст Safari помещается внутри окна против Firefox (Safari 5.0.5 и Firefox 5.0.1 для Mac OS X X 10.6.7). Обратите внимание, как "S" для sans-serif закрывается до верхней части окна Firefox, а не Safari. Разница, похоже, меняется в зависимости от используемого шрифта, где некоторые из них даже последовательно отображаются.

Я читал люди, говорящие, что это из-за проблем округления между font-size и line-height (и фиксируется установкой меньшей высоты, чем размер), но Я думаю, что это опровергнуто моим примером, когда sans-serif/helvetica в Firefox всегда выравнивает вершину в поле.

Мне кажется, что Safari получает больше прав, чем Firefox, т.е. текст, как правило, больше вокруг средней линии.

Есть ли хороший способ сделать их более последовательными? Моя цель - это только браузеры, совместимые со стандартами.

  • NB1: Это не имеет ничего общего с vertical-align.
  • NB2: Я исследовал аналогичную проблему в прошлом без каких-либо вполне удовлетворительных результатов.

Мой тестовый код: http://jsbin.com/omaboc

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style type="text/css">
            body {
              font-size: 50px;
              line-height: 1em;
            }
            div {
            background: #b5e260;
                margin-bottom: 5px;
              }
        </style>
    </head>
    <body>
        <div style="font-family: sans-serif">Some text @ this box</div>
        <div style="font-family: serif">Some text @ this box</div>
        <div style="font-family: arial">Some text @ this box</div>
        <div style="font-family: helvetica">Some text @ this box</div>
        <div style="font-family: courier">Some text @ this box</div>
        <div style="font-family: georgia">Some text @ this box</div>
    </body>
</html>

Ответы

Ответ 1

К сожалению, решения этой проблемы не существует. Текстовый рендеринг выполняется по-разному почти в каждом браузере, и даже между основными версиями браузера он иногда изменяется. В некоторых браузерах он определяется конкретными системами визуализации шрифтов и настройками ОС. Всегда были и всегда будут компромиссы для одного типа рендеринга шрифтов другому, и каждый из них будет меняться с различными типами дисплеев на разных типах оборудования.

Извините, вам придется жить с непиксельными совершенными шрифтами между браузерами, пока не будет монополизирован один браузер, одна ОС без доступных настроек отображения, один тип и размер монитора и один видеокарта. Другими словами, он никогда не будет идеально соответствовать пикселям, пока ваш сайт поддерживает несколько устройств, браузеры, дисплеи и т.д.

(Престижность для выполнения вашей домашней работы и тестирования сначала. Ваш вопрос был хорошо изучен и подумал, прежде чем спрашивать. Хотелось бы, чтобы мы могли дать вам лучший ответ после всей этой работы.)

Ответ 2

Вы пытались использовать Reset в верхней части своего файла таблицы стилей?

Цель таблицы стилей Reset заключается в уменьшении несогласованности браузера в таких вещах, как высоты строк по умолчанию, поля и размеры шрифтов заголовков и т.д.

Вы можете найти объяснение и код здесь: http://meyerweb.com/eric/tools/css/reset/

Надеюсь, это поможет вам!