Почему Firefox рассматривает Helvetica иначе, чем Chrome?

вертикальное положение текста, отображаемого в Helvetica, и размер его области содержимого различаются между Firefox и Chrome для Mac. Например, в Chrome спускаемые устройства обрезаются, если высота строки идентична размеру шрифта.

demonstration of varying vertical character positions between browsers

(я отрегулировал положение элементов блока на этом рисунке, сохраняя согласованность базовой линии, чтобы проиллюстрировать разницу в размере и позиционировании текста). Если у вас есть Mac, вы можете увидеть, о чем я говорю в этом JS Bin.

теперь меня не интересует, как исправить это конкретное несоответствие. Я понимаю, что есть вручную настроенные таблицы стилей сброса это попытка устранить или бумажные различия, но меня особенно интересуют факторы, которые заставили эти браузеры рендерить по-разному в первую очередь.

Я делаю некоторые предположения здесь:

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

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

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

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

поэтому мой конкретный вопрос:здесь в процессе происходит это расхождение, и что причины его возникновения?

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

14
cross-browser css fonts graphics2d postscript

2 ответов

к сожалению, re: рендеринг области содержимого на основе шрифта,CSS2.1 вообще мало что говорит:

высота области содержимого должна быть основана на шрифте, но эта спецификация не указывает, как. UA может, например, использовать em-box или максимальный ascender и descender шрифта. (Последнее гарантирует, что глифы с частями выше или ниже em-box все еще попадают в область содержимого, но приводит к коробкам разного размера для различные шрифты; первый обеспечит авторам возможность контролировать стиль фона относительно "высоты линии", но приводит к рисованию глифов за пределами их области содержимого.)

другими словами, набор, и как именно рисовать и позиционировать область содержимого поля строки, остается до собственной реализации браузера, по крайней мере, в CSS2.1. Однако это может быть лучше определено в будущей спецификации (вероятно,модуль шрифтов, если не отдельная модуль1).

10.8.1 содержит сведения о том, как line-height свойство влияет на отрисовку области содержимого вокруг текста, который течет inline, но опять же это зависит от высоты самой области содержимого, которая, как указано выше, не определена в CSS2.1.

отметим, что auto недопустимое значение для line-height; вы, вероятно, хотели использовать normal, что, кстати, также является его начальным значением (но не обязательно браузер по умолчанию). Кроме того, это то, что спецификация говорит о значении normal:

нормальный
Указывает агентам пользователей установить используемое значение в "разумное" значение на основе шрифта элемента. Значение имеет то же значение, что и значение . Мы рекомендуем использовать значение "normal" между 1.0 и 1.2. Вычисленное значение является "нормальным".

как вы можете видеть, там не так много, чтобы идти дальше, даже в отношении сравнения line-height: normal и line-height: 1 (или 1em или 100%), потому что то, что составляет "нормальную" высоту строки, зависит от браузера. Тем не менее, похоже, что Chrome и Firefox хорошо справляются с сохранением глиф в разумных границах, когда их просят использовать нормальную высоту линии.

кстати, Chrome не клип в подстрочных. Он отображает их вне поля содержимого, но никогда не должен обрезать их до границ поля, если вы не установите overflow: hidden.

1определение CSS3 line-height свойство в настоящее время находится в модуль, но сразу видно, что он давно заброшен или, по крайней мере, ожидает перезаписи. Модуль в его текущем состоянии очень подробно, но достаточно сказать, что он в значительной степени игнорируется как поставщиками браузеров, так и рабочей группой.

4
  • 'высота линии авто' => браузер получает, чтобы выбрать.
  • 'высота строки = размер шрифта' = > ошибка пользователя: текст будет неразборчивым, и снова разумно, действительно важно, чтобы браузер сделал некоторую корректировку.

вы должны использовать некоторые ведущие. Книги, например, могут быть установлены 10pt на 12pt межстрочный интервал.

-1