Как отобразить нативные шрифты MacOS в Chrome

Question

Я пытаюсь визуализировать San Francisco шрифты на macOS в Chrome, но, похоже, он не работает при новом обновлении.

Кажется, что он отлично работает в Safari и на iOS Chrome.

Я не уверен, какой шрифт загружается, но вес шрифта выглядит как 100, за исключением случая использования Roboto.

Вот мой селектор CSS:

h1 {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
}

Как отобразить собственные шрифты macOS в новой версии Chrome?

Примечание. Я также запускаю Catalina 10.15.4, Chrome 81.0.4044.113 и настройку font-family: sans-serif; и изменение шрифта sans-serif по умолчанию в настройках Chrome работает нормально.

Answer 1

См. Следующую ветку StackOverflow, посвященную теме использования системных шрифтов MacOS в браузерах Google Chrome / Chromium: Как использовать новый шрифт Apple в Сан-Франциско на веб-странице

К сожалению, это Похоже, что единственный способ действительно сделать это, ссылаясь на это как веб-шрифт. Использование этого шрифта на рабочем веб-сайте или в приложении за пределами MacOS, iOS или других платформ Apple является нарушением лицензирования их шрифта. Я попытался использовать доступные решения для рендеринга шрифта в Chromium, но безуспешно.

[ОБНОВЛЕНИЕ 4/24/2020] В ссылках на статьи известна проблема с настройкой веса шрифта ссылок на системные шрифты для пользователей Catalina: https://www.coywolf.news/webmaster/chrome-81-breaks-system-fonts-bold/

CSS Трюки также комментируют проблему правильного рендеринга системных шрифтов. Похоже, что Chrome версия 83 в середине мая, мы надеемся, исправит проблемы: https://css-tricks.com/chrome-system-fonts-snafu/