【问题标题】：How to use Apple's new San Francisco font on a webpage如何在网页上使用 Apple 的新 San Francisco 字体
【发布时间】：2021-04-13 07:30:55
【问题描述】：

我想在网站上使用新的 San Francisco 字体。我试过了：

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

无济于事。我已经尝试了this question 的答案，但@font-face 不是这里的解决方案。

【问题讨论】：

网站字体要么取决于用户系统中安装的内容，要么是从外部加载的。这是非常简单的东西，尤其是在字体可供使用的情况下。
font-family: 'SF Pro Text',-apple-system,BlinkMacSystemFont,Roboto,'Segoe UI',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji ','Segoe UI 符号';

标签： css

【解决方案1】：

苹果新系统字体未公开曝光。苹果已经开始抽象系统字体名称：

这种抽象的动机是让操作系统可以更好地选择在给定权重下使用哪个面。苹果还在开发字体功能，例如可选择的“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/

【讨论】：

或者你可以使用像SanFranciscoText-Regular这样的字体名称
如果需要等宽数字在表格中显示，-apple-system 也通过 CSS font-variant-numeric: tabular-nums; 支持。
这个小提琴完全出现在 Times New Roman 中。这里是 10.13.2，Safari 11.0.2 (13604.4.7.1.3)
@BryanBryce 那是 El Cap 的 hack。它不再起作用了，我认为它现在称为.SF NS Text 和.SF NS Display，但你不应该使用它们。我会使用-apple-system。 SF Text/SF Pro 仅在您手动安装字体时才有效。
显然-system-ui 是 Chrome 和 Safari 上的新标准方式。（我不想从你的精彩回答中窃取信用，所以我只是把它放在 cmets 中。furbo.org/2018/03/28/system-fonts-in-css）

【解决方案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");
}

Source

【讨论】：

如果有人想要一个粗体：sanfranciscodisplay-bold-webfont.woff
注意：此答案违反了 Apple 的字体许可条款，其中规定 "[...]您可以仅将 Apple 字体用于创建在 Apple 的 iOS、iPadOS、macOS 或 tvOS 操作系统上运行的软件产品中使用的用户界面（如适用）".
我一直在寻找这个链接来弄清楚这个字体中字母的高度，我希望这个答案更容易找到。

【解决方案3】：

上次测试时间：2018 年 3 月

解决问题

如何在网页上使用 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 上）；旧版 Mac OS X 上的 Neue Helvetica 和 Lucida Grande。
system-ui — 给定平台上的默认 UI 字体。
BlinkMacSystemFont — 相当于 -apple-system，适用于 Mac OS X 上的 Chrome。
"Segoe UI" — Windows (Vista+) 和 Windows Phone。
Roboto — Android（冰淇淋三明治 (4.0)+）和 Chrome 操作系统。
Ubuntu — 所有版本的 Ubuntu。

思路借鉴于以下issue on github。

您可以在article on css-tricks 中查找其他操作系统或更旧版本的字体。

【讨论】：

您确定这实际上是用于在 iOS 上进行渲染的 旧金山 吗？在 iOS 12（模拟器）上看起来不像；在 iOS 13 上看起来像，但 not all glyphs are available.
@FabienSnauwaert，不，我不确定 iOS 12 和 13。这就是我在答案顶部添加日期的原因（即答案现在已经超过 2 年，并且在 iOS 之前发布12 甚至被宣布）。

【解决方案4】：

-apple-system 允许您在 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/ 如何出色地解释细节。

【讨论】：

【解决方案5】：

如果用户正在运行 El Capitan 或更高版本，它将在 Chrome 中运行

font-family: 'BlinkMacSystemFont';

【讨论】：

你有任何官方（或其他）文档的链接吗？

【解决方案6】：

这是对这个相当老的问题的更新。我想在一个网站上使用新的 SF Pro 字体，除了上面提到的（applesocial.s3.amazonaws.com）之外，没有找到字体 CDN。

显然，这不是 Apple 批准的官方内容存储库。实际上，我没有找到任何提供 Apple 字体的官方字体存储库，可供 Web 开发人员使用。

还有一个原因 - 如果您阅读了从 https://developer.apple.com/fonts/ 下载新的 SF Pro 和其他字体的许可协议 - 它在前几段中非常清楚地说明：

[...]您可以仅将 Apple 字体用于创建用户模型在 Apple iOS 上运行的软件产品中使用的接口， macOS 或 tvOS 操作系统（如适用）。前述权利包括在屏幕截图、图像中显示 Apple 字体的权利，此类软件的模型或其他描述、数字和/或印刷品仅在 iOS、macOS 或 tvOS 上运行的产品。[...]

还有：

除非此处明确规定，否则您不得使用 Apple 字体以创建、开发、显示或以其他方式分发任何文档、艺术品、网站内容或任何其他工作产品。

进一步：

除非另有明确许可 [...] (i) 一次只能有一个用户使用 Apple 字体，并且 (ii) 您不得通过可以运行或使用 Apple 字体的网络提供 Apple 字体多台电脑同时使用。

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

【讨论】：

在接受的答案中，您可以看到我们不提供 Apple 网络字体，我们告诉浏览器使用 Apple 系统字体，目前是 SF。您当然不能为 SFPro 提供服务，但您可以指定它用于使用 Apple 设备的人。

【解决方案7】：

您不能使用直接从数据库提供的 Apple System Font。这违反了许可证，但您可以将其用于高于 High Sierra 的 Mac 系统

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

或者你可以使用这个：

font-family: 'BlinkMacSystemFont';

【讨论】：

【解决方案8】：

Apple 正在对系统字体进行抽象。该设施使用新的通用姓氏-apple-system。所以像下面这样的东西应该能得到你想要的。

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

【讨论】：

HTML 画布怎么样？
它是否也适用于 Chrome 或 Firefox 或仅适用于 Safari？

【解决方案9】：

最后一次测试是在 2015 年

当其他解决方案不起作用时，应将此解决方案作为最后选择。

原答案：

在 macOS Chrome/Safari 上工作

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

【讨论】：

单独的代码块并不能提供好的答案。请添加说明。
这是唯一一个对我有用的 Atom 语法样式表。
请注意，这在 iOS 中不起作用，而 -apple-system, 'BlinkMacSystemFont' 在 iOS Chrome + Safari 和 OS X Chrome + Safari 中起作用。
另外，我应该指出，这在 iOS 上不起作用的原因是因为系统字体在 macOS 上以 .SFNS 开头，而在 iOS 上以 .SFUI 开头。如果您出于某种原因绝对必须这样做，那会解决它……但不要这样做！
谢谢，我已将其应用于 SF 字体并且效果很好。 -apple-system 的问题适用于所有内容，并覆盖字体系列的样式。

【解决方案10】：

基本上，这对我有用：

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

附：这适用于所有系统。

【讨论】：

【解决方案11】：

试试这个：

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

它对我有用。 ;)

如果可行，请点赞。

【讨论】：