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

Question

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

157

我想在网站上使用新的旧金山字体。我已经尝试过：

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

尝试了很多方法，但无济于事。我已经尝试了这个问题中提供的答案，但@font-face在这里并不是解决方案。

- inorganik

1

网站字体要么依赖于用户系统中安装的字体，要么是外部加载的。如果字体可供使用，这是非常简单的事情。 - Sparky

1

字体系列：'SF Pro Text'，-apple-system，BlinkMacSystemFont，Roboto，'Segoe UI'，Helvetica，Arial，sans-serif，'Apple Color Emoji'，'Segoe UI Emoji'，'Segoe UI Symbol'； - shivambhanvadia

11个回答

103

目前的所有答案包括被接受的答案都不会在未安装苹果旧金山字体作为系统字体的系统中使用它。由于问题并不是“如何在网页上使用OSX系统字体”，因此正确的解决方案是使用Web字体：

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

源代码

- Ilias Karim

5

如果有人需要一个加粗的字体：sanfranciscodisplay-bold-webfont.woff。 - Snowbases

64

注意：此答案违反了苹果的字体许可条款，该条款规定“[...] 您只能使用苹果字体创建用于在适用的 Apple iOS、iPadOS、macOS 或 tvOS 操作系统上运行的软件产品中使用的用户界面模型。”。 - Teh

我一直在搜索这个链接，以确定这种字体的字母高度是多少，希望能更容易地找到答案。 - polkovnikov.ph

有没有任何CDN提供带有西里尔字母支持的字体版本？ - VityaSchel

有很多网站都在使用那种字体，例如：https://web.archive.org/web/20230108003247/https://linear.app/。 - Anshuman Kumar

53

上次测试时间：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;

-apple-system — 在 Safari（Mac OS X 和 iOS 上）使用 San Francisco 字体；在旧版本的 Mac OS X 上使用 Neue Helvetica 和 Lucida Grande 字体。
system-ui — 给定平台上的默认 UI 字体。
BlinkMacSystemFont — 在 Mac OS X 上，相当于 -apple-system，适用于 Chrome 浏览器。
"Segoe UI" — 适用于 Windows（Vista+）和 Windows Phone。
Roboto — 适用于 Android（Ice Cream Sandwich (4.0)+）和 Chrome OS。
Ubuntu — 适用于所有版本的 Ubuntu。

这个想法来自于 github 上的问题。

您可以在这篇 css-tricks 的文章中查找其他操作系统或旧版本的字体。

- user8554766

你确定在iOS上实际使用的是旧金山字体吗？在iOS 12（模拟器）上看起来不像；在iOS 13上看起来像，但并非所有字形都可用。 - Fabien Snauwaert

1

@FabienSnauwaert，我不确定iOS 12和13。这就是为什么我在答案的顶部添加了日期（即答案现在已经超过2年了，并且发布在iOS 12甚至没有宣布之前）。 - user8554766

28

-apple-system允许您在Safari中选择San Francisco字体。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/详细解释了这种方法）。

- Andreas Kwiatkowski

11

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

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

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

[...]您只能使用Apple Font创建运行在Apple的iOS、macOS或tvOS操作系统上的软件产品的用户界面的模型。前述权利包括在仅运行在iOS、macOS或tvOS上的此类软件产品的屏幕截图、图像、模型或其他描绘数字和/或印刷作品中显示Apple Font[...]。

并且：

除本协议明确规定外，您不得使用Apple Font来创建、开发、显示或以其他方式分发任何文档、艺术品、网站内容或任何其他工作产品。

进一步地：

除非另有明确允许[...]（i）每次只能有一个用户使用Apple Font，（ii）您不得将Apple Font放在可以同时运行或使用多台计算机的网络上。

对我来说没有更多问题了。苹果显然不希望他们的字体在其产品之外的Web上共享。

- jhohlfeld

4

在已接受的答案中，您可以看到我们并没有提供苹果网页字体服务，而是告诉浏览器使用当前苹果系统字体，即SF。您当然不能提供SFPro字体，但可以指定仅供使用苹果设备的人使用它。 - inorganik

11

如果用户使用 El Capitan 或更高版本，该功能将在 Chrome 中正常工作。

font-family: 'BlinkMacSystemFont';

- Benjamin

3

你有这方面官方（或非官方）文档的链接吗？ - Moshe Katz

8

你不能直接从数据库中使用苹果系统字体。这违反了许可证，但你可以在高于High Sierra的Mac系统中使用它。

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

或者你可以使用以下方式：

font-family: 'BlinkMacSystemFont';

- theroyakash

6

试一试：

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

这对我有用。 ;)

如果有效，请点赞。

- shivambhanvadia

只有在字体预装的情况下才能正常工作。例如，它在我的 Mac 上运行良好，但在我朋友的 Mac 上字体显示不正确。 - undefined

5

Apple将来会抽象化系统字体。这个功能使用新的通用字体族名称“-apple-system”。所以像下面这样的东西可以帮助你得到想要的结果。

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

- dors

HTML画布怎么样？ - clearlight

它也能在Chrome或Firefox上运行吗？还是只能在Safari上运行？ - Salomanuel

4

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

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

附注：此方法适用于所有系统。

- Lyam Dexter Mosnier

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- inorganik · Accepted Answer

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

这种抽象的动机是为了使操作系统在给定字重时可以做出更好的选择。苹果还在研究字体特性，例如可选择的“6”和“9”字形或非等宽数字。我的猜测是他们也想将这些功能带到Web上。

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

您可以在以下fiddle中演示它们；大多数尚未得到支持：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字体.otf文件供您个人使用：https://developer.apple.com/fonts/。