小开

最佳答案

苹果的新系统字体没有公开。苹果已经开始抽象系统字体名称:

这种抽象的动机是为了让操作系统能够在给定的权重下做出更好的选择。苹果公司也在研究字体特性，比如可选择的“6”和“9”字形或非等间距数字。我猜他们也想把这些功能带到网络上。

Safari 和 Firefox 在 -apple-system中使用 SF; 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/

显然，苹果公司正在与 W3C 合作，使用 CSS.https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html中的通用“系统”字体名称进行标准化

下载 SF font. otf 文件供您个人使用: https://developer.apple.com/fonts/

小开

苹果正在抽象未来的系统字体。这个设施使用新的通用姓氏-苹果-系统。所以下面这样的东西应该能让你得到你想要的。

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

小开

如果用户正在运行 El Capitan 或更高版本，它将在 铬合金中使用

font-family: 'BlinkMacSystemFont';

小开

最近一次测试是在2015年

只有在其他方法不起作用时才使用此答案。

原答案:

在 Mac OS Chrome/Safari 上工作

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

小开

目前没有一个答案 包括被接受的那个将使用苹果的旧金山字体的系统，没有安装它作为系统字体。既然问题不是“如何在网页上使用 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");
}

来源

小开

苹果系统允许你在 Safari 中选择旧金山，而 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/做了很好的工作来解释细节。

小开

最后一次测试: 2018年3月

回答这个问题

如何在网页上使用苹果的新旧金山字体

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

或(甚至更短) :

font-family: -apple-system, BlinkMacSystemFont;

应该够了。

不过，如果你想在多个平台上默认使用系统字体，我建议:

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

旧金山的 Safari (基于 Mac OS X 和 iOS) ; 新 Helvetica 和 Lucida Grande 基于旧版本的 Mac OS X。
system-uiー给定平台上的默认 UI 字体。
BlinkMacSystemFontー相当于 Mac OS X 上 Chrome 浏览器的 -apple-system。
"Segoe UI"ー Windows (Vista +)及 Windows Phone。
Robotoー Android (Ice Cream Sandwich (4.0) +)和 Chrome OS。
Ubuntuーー所有版本的 Ubuntu。

这个想法是借用了下面的在 github 上发行。

您可以在此关于 css 技巧的文章中查找其他操作系统或更老版本的字体。

小开

这是对这个老问题的更新。我想在一个网站上使用新的 SF Pro 字体，除了上面提到的( applesocial.s3.amazonaws.com )之外，没有发现任何字体 CDN。

显然，这不是苹果公司批准的官方内容库。事实上，我没有发现任何官方字体库提供苹果字体，准备供网络开发人员使用。

这是有原因的——如果你读了从 https://developer.apple.com/fonts/下载新的 SF Pro 和其他字体所附带的许可协议，它在前几段非常清楚地说明:

[ ... ]您可以使用苹果字体仅用于创建用户模型运行在苹果 iOS 系统上的软件产品所使用的界面, 适用的 macOS 或 tvOS 操作系统。上述权利包括在屏幕截图中显示苹果字体的权利, 这类软件的模型或其他数码及/或印刷描述仅在 iOS、 macOS 或 tvOS 上运行的产品

还有:

除本文明确规定外，你不得使用苹果电脑字体，创建，开发，显示或以其他方式分发任何文件，艺术品，网站内容或任何其他工作产品。

进一步说明:

除非另有明确许可[ ... ](i)一次只能有一个用户使用 Apple Font，以及(ii)你不能让 Apple Font 在可以同时由多台计算机运行或使用的网络上可用。

我没有更多的问题了，苹果公司显然不希望他们的字体在他们的产品之外在网络上共享。

小开

不能直接使用数据库提供的 Apple System Font。这违反了许可协议，但是你可以用这个来对付比 High Sierra 更高级的 Mac 系统

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

或者你可以用这个:

font-family: 'BlinkMacSystemFont';

小开

试试这个:

font-family: 'SF Pro Text',-apple-system,BlinkMacSystemFont,Roboto,'Segoe UI',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';

这对我很管用

如果有效，请投赞成票。

小开

基本上，这就是对我有效的方法:

-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif

另外，所有系统都能用。