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

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

demonstration of varying vertical character positions between browsers

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

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

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

  • Стандарты существуют как для рендеринга шрифтов, так и для определения размеров и позиционирования глифов в стандартной модели окна, но могут быть неопределенными с точки зрения их взаимодействия. </Р>

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

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

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

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

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

14
nl ja de
Если вас интересует мета-обсуждение этого вопроса, его можно найти здесь </а>.
добавлено автор George Stocker, источник
FWIW, в Windows IE, FF и Chrome все делают что-то похожее на ваш пример chrome. Тем не менее, я бы склонен согласиться с тем, что нецелесообразно полагаться на согласованность по этим вопросам - при меньших размерах шрифта различия могут быть довольно большими.
добавлено автор Eamon Nerbonne, источник
Кроме того, вы можете обновить свою версию FF: у вас 5 версий, и, по-видимому, версии 14 + 15 ввели некоторые изменения шрифта, связанные с макросом: support.mozilla.org/en-US/questions/937994 Это не похоже на вашу проблему, но это стоит того.
добавлено автор Eamon Nerbonne, источник
Адам, я внес некоторые изменения здесь, основываясь на мета-обсуждении и очень полезной обратной связи от BoltClock. Если я искажаю ваши интересы, не стесняйтесь редактировать дальше - но постарайтесь сохранить сплоченный вопрос, пожалуйста. Повторно открылся, так как я чувствую, что стоит конкретный, конструктивный, ответный вопрос.
добавлено автор Shog9, источник
Кроме того, если вам не нравится этот конкретный вопрос, поиск SO дает гораздо больше .
добавлено автор Sparky, источник
Каждый браузер будет немного отличаться, особенно там, где W3C не стандартизован. В противном случае, не уверен, что вы ищете здесь. Нет волшебной пули.
добавлено автор Sparky, источник
Насколько я знаю, каждый webbrowser в значительной степени свободен для визуализации шрифтов по своему усмотрению, если он следует правилам CSS. Не ожидайте, что все браузеры будут выводить то же самое, но оптимизируйте свой код, чтобы он работал с любым стилем рендеринга шрифтов.
добавлено автор Tom van der Woerdt, источник
Из различия шрифтов CSS между браузерами : «Я вижу разницу в ширине данного текст. Я думаю, что высота такая же ». Этот вопрос конкретно касается высоты области содержимого и вертикального позиционирования текста в этой области.
добавлено автор Adam, источник
Стратегии рендеринга больше связаны с намеками и кернинг , чем определение размера области содержимого вокруг текста, которая здесь отличается несколькими пикселями. Если я ошибаюсь в этом, мне бы понравилось объяснение.
добавлено автор Adam, источник
Спасибо, @ Shog9. Это очень в духе разговора из мета.
добавлено автор Adam, источник

2 ответы

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

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

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

Section 10.8.1 contains some details on how the line-height property affects the rendering of the content area around text that flows inline, but again it depends on the height of the content area itself, which as stated above is undefined in 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 .


1 A CSS3 definition of the line-height property currently resides in this module, but it's immediately obvious that it's been long abandoned, or at least pending a rewrite. The module in its current state is extremely detailed, but suffice it to say that it's been largely ignored by both browser vendors and the working group.

4
добавлено
Я могу вникнуть в источники движков рендеринга, используемых каждым браузером, но мне нужно будет сохранить это позже.
добавлено автор BoltClock, источник
Еще раз спасибо за проведение этого исследования. Я просмотрел исходный код. Похоже, что Webkit имеет возможность измерять глифы, но там, где он устанавливает базовую линию в области содержимого, не основывается ни на одном стандарте. Этот поток списков рассылки W3C отлично справляется с обобщением состояния типографских базовых линий в CSS. Насколько я могу судить, за последние пару лет ничего не изменилось:
добавлено автор Adam, источник
  • 'Line height is auto' => the browser gets to choose.
  • 'Line height = font size' => user error: the text will be illegible, and again it is reasonable, indeed essential, for the browser to make some adjustment.

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

1
добавлено
Этот вопрос касается не разборчивости разных значений высоты линии. Речь идет о различиях в поведении между браузерами и стандартах, которые ими управляют. Кроме того, я думаю, вы можете быть смущены тем, как работает линейная высота: "Определяет высоту, которая используется при вычислении высоты строки строки" . Установка его с тем же значением, что и размер шрифта, по общему признанию сгущена, но не неразборчива .
добавлено автор Adam, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)