У меня возникла проблема с 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