Я хотел бы использовать новый шрифт San Francisco на своем сайте. Я пробовал:

font: 'San Francisco', Helvetica, Arial, san-serif;

но безрезультатно. Я пробовал ответы на этот вопрос , но @font-faceэто не решение.

Новый системный шрифт 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

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

Ни один из текущих ответов, включая принятый, не будет использовать шрифт 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");
}

Источник

Последний раз тестировался: март 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-трюках .

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

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

Roboto или Helvetica Neue можно было вставить в качестве запасных вариантов даже до шрифта без засечек.

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 / отлично объяснили детали.

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

font-family: 'BlinkMacSystemFont';

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

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

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

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

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

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

И:

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

Дальше:

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

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

Вы не можете использовать системный шрифт Apple, обслуживаемый непосредственно из базы данных. Это противоречит лицензии, но вы можете использовать это для Mac систем выше, чем High Sierra.

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

Или вы можете использовать это:

font-family: 'BlinkMacSystemFont';

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

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

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

Работайте в macOS Chrome / Safari

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