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

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

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

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

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

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

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

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

Ответ 1

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

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

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

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

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

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

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

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

¹_{Определение свойства line-height CSS3 в настоящее время находится в этом модуле, но это сразу же очевидно, что он давно заброшен или, по крайней мере, ожидает перезаписи. Модуль в его текущем состоянии чрезвычайно подробный, но достаточно сказать, что он в значительной степени игнорировался как продавцами браузеров, так и рабочей группой.}

Ответ 1

Ответ 2