Почему отслеживание шрифтов по умолчанию в Safari отличается от других браузеров? - PullRequest
Новая
       46

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

3 голосов
/ 09 мая 2019

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

Важные вещи, которые нужно знать:

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

Визуальная помощь:

enter image description here


Подробности о компоновке и размерах:

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

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


EDIT

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

1 Ответ

2 голосов
/ 09 мая 2019

Ну, есть куча вещей в игре.

Прежде всего 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 обычно делают это за вас, но это проблема, если вы самостоятельно размещаете шрифты)

Edit:

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

...