Почему в Safari отслеживание шрифтов / межбуквенный интервал по умолчанию отличается от других браузеров?

У меня возникла проблема с Safari, когда блок текста с использованием веб-шрифтов (не уверен, что проблема заключается в веб-шрифтах) в Safari переносится по-другому, чем в любом другом браузере. В данном конкретном случае мы проектируем эти блоки так, чтобы выглядеть так, как если бы они были установлены на text-align: justify;, но на самом деле они установлены на text-align: left;. text-align: justify; не является желательным в этой настройке, так как он плохо вычисляет расстояние между словами.

Важная информация:

  • Как я уже упоминал, в макете используются веб-шрифты. Неважно, какие веб-шрифты (я просмотрел сотни, и это случается со всеми).
  • Для всей страницы, включая отступы и размер шрифта, используется ширина области просмотра (vw). Идея здесь в том, что блок текста одинаково масштабируется для всех размеров браузера и сохраняет его макет, включая лохмотья.

Наглядное пособие:

введите здесь описание изображения


Подробная информация о компоновке и размерах:

  • Кадр 1: рабочий стол Safari.
  • Фрейм 2: рабочий стол Chrome.
  • Кадр 3: Chrome с непрозрачностью 50% по сравнению с Safari.
  • Ширина окна на этом снимке экрана 1220px.
  • Отступ слева / справа равен padding: 0 calc(129 / 1220 * 100vw);, что равно 129px.
  • Остается доступное пространство для содержимого 962px.
  • letter-spacing по умолчанию установлен в 0 для всего содержимого.

Итак, кто-нибудь знает, почему Safari, похоже, преувеличивает отслеживание / межбуквенный интервал?



ИЗМЕНИТЬ

Мы только что запустили данный сайт, поэтому вы можете увидеть проблему в действии здесь: https://www.typography.com/fonts/hoefler-text/overview


person Brandon Durham    schedule 09.05.2019    source источник
comment
Кстати, этот GIF - фантастический способ проиллюстрировать проблему. Я бы хотел, чтобы так задавалось больше вопросов!   -  person Bryce Howitson    schedule 09.05.2019
comment
Спасибо. :) Мне потребовалось 20 минут, чтобы собрать это вместе и 1 минуту, чтобы написать пост. Но я надеюсь, что это поможет другим сэкономить время, пытаясь понять, о чем я, черт возьми, творится.   -  person Brandon Durham    schedule 09.05.2019
comment
Надо сказать, что без сравнения браузеров сайт выглядит действительно хорошо. И это приятное напоминание о том, что когда дело доходит до семейств шрифтов, вы получаете то, за что платите ...   -  person Bryce Howitson    schedule 09.05.2019


Ответы (2)


Что ж, в игре есть масса вещей.

Прежде всего, Chrome и Safari используют разные значения по умолчанию для рендеринга текста, но в дополнение к этому Chrome в разных версиях MacOS или Windows также по-разному отображает текст из-за того, как работает рендеринг системного шрифта.

Обычно можно сделать Safari и Chrome (в одной системе) немного ближе, установив текстовый CSS-код:

text-rendering: optimizeLegibility Так как это значение по умолчанию в Chrome, но Safari по умолчанию optimizeSpeed

Также может быть целесообразно явно установить: font-feature-settings: "kern"; и font-smoothing: antialiased (обратите внимание, что оба требуют префиксов поставщика)

Затем не забудьте указать числовой вес шрифта. Например: font-weight: 400 для "обычного". (Браузеры могут не выбирать одинаковый вес для обычных / полужирных ключевых слов)

Наконец, убедитесь, что вы используете наиболее оптимизированную версию веб-шрифта (Typekit и Google обычно делают это за вас, но это проблема, если вы самостоятельно размещаете шрифты).


Редактировать:

Возможно, стоит заставить и Chrome, и Safari создать «композитный слой» (в основном это означает ускорение графического процессора). Вы можете сделать это с помощью backface-visibility: hidden. Хотя я подозреваю, что это специфическая вещь для MacOS, и в браузере может не быть решения.

person Bryce Howitson    schedule 09.05.2019

Добавление font-feature-settings: "kern"; к элементу для шрифтов решило мою проблему с Safari, некорректно отображающим межбуквенный интервал.

person Anthony Jones    schedule 19.06.2020
comment
Спасибо! Это решает мою проблему с text-anchor:middle без учета кернинга пар символов при вычислении ширины текста в SVG. Хром по умолчанию делал. Это делает текст Safari идеальным для соответствия. - person D.McG.; 23.06.2020
comment
С удовольствием, @ D.McG.! Проблема с Safari сводила меня с ума. Рад, что помог тебе! Ваше здоровье! - person Anthony Jones; 25.06.2020