css - 如何在网页上使用 Apple 的新 San Francisco 字体

Question

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

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

没有用。我试过 this question 的答案, 但 @font-face 不是这里的解决方案。

Answer 1

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

The motivation for this abstraction is so the operating system can make better choices on which face to use at a given weight. Apple is also working on font features, such as selectable “6″ and “9″ glyphs or non-monospaced numbers. It’s my guess that they’d like to bring these features to the web, as well.

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

您可以在下面的 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/

而且显然 Apple 正在与 W3C 合作以在 CSS 中使用通用“系统”字体名称进行标准化。 https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

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