Answers:
苹果的新系统字体未公开公开。苹果已经开始抽象系统字体名称：
这种抽象的动机是使操作系统可以在给定的权重下更好地选择使用哪张脸。苹果还在开发字体功能，例如可选的“ 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/
我从Craig Hockenberry的文章中获得了我的信息，该文章有很多有关使用字体的信息：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-system也可以通过CSS支持font-variant-numeric: tabular-nums;。
.SF NS Text和.SF NS Display现在的，但你不应该使用这些。我会用-apple-system。SF Text/ SF Pro仅当您手动安装了字体时才起作用。
当前的答案（包括已接受的答案）都不会在未安装Apple旧金山字体的系统上使用该字体。由于问题不在于“如何在网页上使用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");
}
解决这个问题
如何在网页上使用Apple的新旧金山字体
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 —给定平台上的默认UI字体。BlinkMacSystemFont—等效于-apple-system，对于Mac OS X上的Chrome。"Segoe UI" — Windows（Vista +）和Windows Phone。Roboto — Android（Ice Cream Sandwich（4.0）+）和Chrome OS。Ubuntu — Ubuntu的所有版本。您可以在css-tricks的本文中查找其他操作系统或旧版本的字体。
-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旧金山/在解释细节方面做得很好。
如果用户运行的是El Capitan或更高版本，则可以在Chrome中使用
font-family: 'BlinkMacSystemFont';苹果正在提取系统字体。此功能使用新的通用家族名称-apple-system。因此，类似下面的内容应该可以为您提供所需的东西。
body
{
font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
}这是对这个相当老的问题的更新。我想在网站上使用新的SF Pro字体，但除了上面提到的（applesocial.s3.amazonaws.com）外，没有找到CDN字体。
显然，这不是Apple认可的官方内容存储库。实际上，我没有找到任何可供Apple字体使用的正式字体存储库，可供Web开发人员使用。
这是有原因的-如果您阅读了从https://developer.apple.com/fonts/下载新的SF Pro和其他字体所附带的许可协议-它在前几段中非常清楚地指出：
您可以仅将Apple字体用于创建用户界面的模型，以在适用于Apple的iOS，macOS或tvOS操作系统上运行的软件产品中使用。前述权利包括仅在iOS，macOS或tvOS上运行的此类软件产品的屏幕快照，图像，模型或其他描述（数字和/或印刷形式）中显示Apple字体的权利。[...]
和：
除本文明确规定外，您不得使用Apple字体来创建，开发，显示或以其他方式分发任何文档，艺术品，网站内容或任何其他工作产品。
进一步：
除非另有明确许可，否则（i）一次只能有一个用户使用Apple字体，并且（ii）您不能在可以由多台计算机运行或使用的网络上使Apple字体可用与此同时。
没有更多问题要问我。Apple显然不希望其字体在产品之外的整个网络上共享。
您不能使用直接从数据库提供的Apple System Font。这违反了许可证，但是您可以将其用于高于High Sierra的Mac系统
body
{
font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
}或者您可以使用以下命令：
font-family: 'BlinkMacSystemFont';当其他解决方案不起作用时，应将此解决方案用作最后选择。
原始答案：
在macOS Chrome / Safari上工作
body { font-family: '.SFNSDisplay-Regular', sans-serif; }-apple-system, 'BlinkMacSystemFont'适用于iOS Chrome + Safari和OS X Chrome + Safari。