Question

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

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

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

Answer 1

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/

我从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/

Answer 2

当前的答案包括已接受的答案都不会在未安装系统字体的系统上使用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");
}

Source

Answer 3

-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/能够很好地解释细节。

Answer 4

上次测试时间：2018年3月

解决问题

如何在网页上使用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（冰淇淋三明治（4.0）+）和Chrome操作系统。
Ubuntu - 所有版本的Ubuntu。

这个想法来自以下issue on github。

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

Answer 5

如果用户正在使用El Capitan或更高版本，则可以在 Chrome 中使用

font-family: 'BlinkMacSystemFont';

Answer 6

Apple正在抽象未来的系统字体。该工具使用新的通用系列名称-apple-system。所以像下面这样的东西应该能得到你想要的东西。

[widget]
  type = chart
  title = PV power
  timespan = 3 day
  entity = pvout.25630

[series]
  label = Sun Altitude at (-35.3089, 149.2004)
  metric = sun_altitude
  color = orange

  replace-value = value < 0 ? null : value

  [tags]
   lat=-35.3089 
   lon=149.2004

Answer 7

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

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

或者您可以使用此：

font-family: 'BlinkMacSystemFont';

Answer 8

使用Chrome / Safari

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

Answer 9

这是对这个相当老的问题的更新。我想在网站上使用新的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 字体，创建，开发，显示或以其他方式分发文档，艺术品，网站内容或任何其他工作产品。

进一步：

除非另有明确许可，否则（i）一次只能有一个用户使用Apple字体，并且（ii）您不得在可以运行或使用Apple Font的网络上提供Apple Font多台计算机同时显示。

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

Answer 10

尝试一下：

字体家族：“ SF Pro Text”，-apple-system，BlinkMacSystemFont，Roboto，“ Segoe UI”，Helvetica，Arial，sans-serif，“ Apple Color Emoji”，“ Segoe UI Emoji”，“ Segoe UI”符号”；

对我有用。 ;）如果可行，请进行投票。

Answer 11

基本上，这对我有用：

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

P.S。这适用于所有系统。

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

11 个答案:

上次测试时间：2018年3月