Недавно я купил новый 279-дюймовый экран 2019 iMa c с дисплеем Retina 5K. Он должен был заменить мою более старую модель конца 2013 года, которая долгое время была моей рабочей лошадкой.
Вскоре после запуска и запуска с Chrome, я заметил, что некоторые заголовки на веб-сайтах были более смелыми, чем я помнил, и смог выяснить, что это происходит с веб-сайтами, которые используют вариацию стека системных шрифтов. В частности, если font-family
было установлено на BlinkMacSystemFont
или system-ui
, заголовки часто перестали отображаться с правильным весом шрифта. Все выглядит так, как будто вес шрифта был установлен на normal
.
Что удивительнее, так это то, что благодаря некоторому возмущению в инструментах разработки ( Ссылка на Codepen ) я понял, что это происходит только с Размер шрифта не должен превышать 20 пикселей, поэтому существует некоторая зависимость от размера, которая влияет на проблему. Похоже, что это как-то связано со сглаживанием шрифтов, так как font-weight начинает работать снова, если я установил -webkit-font-smoothing: none;
, но тогда это выглядит совершенно ужасно. Ниже приведен скриншот того, что я имею в виду.
Я полностью сбит с толку этим. Я пытался установить Сан-Франциско из ресурсов Apple Developer . Я пошел в Font Book -> File -> Restore Standard Fonts, который не работал. Я также пробовал установить и снять флажок «Использовать сглаживание шрифтов, когда оно доступно» в «Настройках» -> «Общие».
Если я открою инструменты разработчика Chrome и go для компьютера -> Отображаемые шрифты, он говорит .SF NS
, что, как я полагаю, означает, что он находит Сан-Франциско просто отлично, но, по-видимому, перестает работать выше 20px.
Это происходит только на Chrome и только на моем новом iMa c. У моего более старого 27-дюймового iMa c нет этой проблемы с дисплеем, как и у любых других моих устройств Apple с Catalina и Chrome. Так может это как-то связано с 5к дисплеем? Непонятно.
Моя Chrome версия является текущей, на момент написания этой статьи это Версия 81.0.4044.113.
Редактировать:
Некоторые дополнительные копания:
- Если я вручную укажу «SF Pro Text» или «SF Pro Display» для
font-family
, он будет правильно отображаться с правильными весами. - Эта ошибка Chromium отчет кажется очень актуальным, который ссылается на раздел Руководства Apple для разработчиков , в котором объясняется, почему он меняется ровно на 20 пикселей - потому что именно тогда система пытается использовать SF Pro Display вместо SF Pro Text , Возможно, это указывает на проблему с внутренне установленными версиями этих шрифтов:
Используйте SF Pro Text для текста размером 19 точек или меньше и SF Pro Display для текста размером 20 точек или больше. Когда вы используете Сан-Франциско для текста в стандартных элементах управления, таких как кнопки и метки, macOS автоматически применяет наиболее подходящий вариант на основе размера точки и настроек специальных возможностей пользователя.
- A related отчет об ошибке хрома , который описывает проблему, связанную с кернингом / отслеживанием. Он закрыт и не упоминает вес шрифта, но кажется, что причина root может быть такой же.