Ответ 1

Новый системный шрифт Apple публично не раскрывается. Apple начала абстрагировать имена системных шрифтов:

Мотивация для этой абстракции состоит в том, чтобы операционная система могла лучше выбирать, какое лицо использовать при данном весе. Apple также работает над функциями шрифтов, такими как выбираемые символы "6" и "9" или немонокальные числа. Я думаю, что они хотели бы также представить эти функции в Интернете.

Safari и Firefox используют SF для -apple-system; Chrome распознает BlinkMacSystemFont:

body {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

Есть и другие варианты:

font-family: -apple-system-body
font-family: -apple-system-headline
font-family: -apple-system-subheadline
font-family: -apple-system-caption1
font-family: -apple-system-caption2
font-family: -apple-system-footnote
font-family: -apple-system-short-body
font-family: -apple-system-short-headline
font-family: -apple-system-short-subheadline
font-family: -apple-system-short-caption1
font-family: -apple-system-short-footnote
font-family: -apple-system-tall-body

Вы можете продемонстрировать их на следующей скрипке; большинство из них еще не поддерживаются: http://jsfiddle.net/v94gw9nx/

Я получил свою информацию из статьи Крейга Хоккенберри, в которой много полезной информации об использовании шрифта: http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/

Кроме того, в блоге Surfin 'Safari есть отличная информация об использовании абстрактных системных шрифтов: https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/

И, очевидно, Apple работает с W3C над стандартизацией с использованием общего "системного" имени шрифта в CSS. https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

Загрузите файлы .otf шрифтов SF для личного пользования: https://developer.apple.com/fonts/

Ответ 2

Ни один из текущих ответов, включая принятый, не будет использовать шрифт Apple San Francisco в системах, в которых он не установлен в качестве системного шрифта. Поскольку вопрос не в том, "как использовать системный шрифт OS X на веб-странице", правильное решение заключается в использовании веб-шрифтов:

@font-face {
  font-family: "San Francisco";
  font-weight: 400;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}

Источник

Ответ 3

-apple-system позволяет вам выбрать Сан-Франциско в Сафари. BlinkMacSystemFont - соответствующая альтернатива Chrome.

font-family: -apple-system, BlinkMacSystemFont, sans-serif;

Roboto или Helvetica Neue могут быть вставлены в качестве резервных копий даже до sans-serif.

https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-a (как ранее http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/ проделали отличную работу, объясняя детали.

Ответ 4

Последний раз тестировалось: март 2018 г.

Для решения вопроса

Как использовать новый шрифт Apple San Francisco на веб-странице

font-family: -apple-system, system-ui, BlinkMacSystemFont;

или (еще короче):

font-family: -apple-system, BlinkMacSystemFont;

должно хватить.

Если вы хотите использовать системный шрифт по умолчанию на нескольких платформах, я бы предложил:

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;

• -apple-system - Сан-Франциско в Safari (на Mac OS X и iOS); Neue Helvetica и Lucida Grande в старых версиях Mac OS X.
• system-ui - шрифт интерфейса пользователя по умолчанию для данной платформы.
• BlinkMacSystemFont - эквивалент -apple-system для Chrome в Mac OS X.
• "Segoe UI" - Windows (Vista+) и Windows Phone.
• Roboto - Android (Ice Cream Sandwich (4.0) +) и Chrome OS.
• Ubuntu - все версии Ubuntu.

Идея заимствована из следующего выпуска на github.

Вы можете найти шрифты для других ОС или более старых версий в этой статье на css-tricks.

Ответ 5

Если пользователь запускает El Capitan или выше, он будет работать в Chrome с

font-family: 'BlinkMacSystemFont';

Ответ 6

Apple абстрагирует системные шрифты в будущем. Этот объект использует новую родовую фамилию -apple-system. Итак, что-то вроде ниже должно получить то, что вы хотите.

body 
{
  font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
}

Ответ 7

Последнее тестирование в 2015 году

Следует использовать это решение как последний выбор, когда другие решения не работают.

Оригинальный ответ:

Работа на MacOS Chrome/Safari

body { font-family: '.SFNSDisplay-Regular', sans-serif; }

Ответ 8

Это обновление к этому довольно старому вопросу. Я хотел использовать новые шрифты SF Pro на веб-сайте и не нашел никаких шрифтов CDN, кроме вышеупомянутых (appleocial.s3.amazonaws.com).

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

И есть причина - если вы читаете лицензионное соглашение, которое поставляется с загрузкой нового SF Pro и других шрифтов из https://developer.apple.com/fonts/, - в первых нескольких параграфах очень четко сказано:

[...] вы можете использовать Apple Font исключительно для создания макетов пользователя интерфейсы, которые будут использоваться в программных продуктах, работающих на Apples iOS, операционные системы macOS или tvOS, в зависимости от обстоятельств. Вышеизложенное право включает в себя право показывать Apple Font на снимках экрана, изображения, макеты или другие изображения, цифровые и/или печатные, такого программного обеспечения продукты, работающие исключительно на iOS, macOS или tvOS. [...]

И:

За исключением случаев, прямо предусмотренных в настоящем документе, вы не можете использовать Apple Шрифт, создавать, разрабатывать, отображать или иным образом распространять любые документация, иллюстрации, контент веб-сайта или любой другой продукт работы.

Далее:

Если иное прямо не разрешено [...] (i) только один пользователь может использовать шрифт Apple одновременно, и (ii) вы не можете делать шрифт Apple доступным по сети, где он может работать или использоваться несколькими компьютерами. в то же время.

Больше нет вопросов для меня. Apple явно не хочет, чтобы их шрифты распространялись через Интернет за пределами их продуктов.

Ответ 9

TransType 4, необходимый для перекодирования шрифтов SF PRO для Интернета. Включите кредиты для шрифтов Apple, где вы используете шрифты. Посмотрите видео сеанса, чтобы оценить, насколько хорошо загружаемые SF-шрифты интегрируются с X-Code. Ничего общего с традиционной веб-типографикой, использующей шрифты SF от Apple. Когда FontLab импортирует SF-шрифты, вы можете видеть, что они искажены для программирования, специфичного для X-кода, объясняя, почему необработанные они не годятся для @fontface - TransType восстанавливает 7359 глифов для каждого варианта шрифта SF PRO, объяснили многие из этих специальных глифов, таких как стрелки. в видео. Необходимо отсортировать и переименовать каждый вариант в правильные группы стилей и правильный вес шрифта. Затем конвертируйте в обычный TTF или обычный OTF, затем конвертируйте в WOFF и WOFF2. Код вашего CSS, посмотрите, работает ли это.