CSS 如何在网页上使用 Apple 的新旧金山字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32660748/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use Apple's new San Francisco font on a webpage
提问by inorganik
I'd like to use the new San Francisco font on a site. I've tried:
我想在网站上使用新的旧金山字体。我试过了：
font: 'San Francisco', Helvetica, Arial, san-serif;
to no avail. I have tried the answers to this question, but @font-faceis not the solution here.
无济于事。我已经尝试了这个问题的答案，但@font-face不是这里的解决方案。
回答by inorganik
Apple's new system font is not publicly exposed. Apple has started abstracting system font names:
苹果的新系统字体没有公开曝光。苹果已经开始抽象系统字体名称：
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.
这种抽象的动机是让操作系统可以在给定的权重下更好地选择使用哪个面。Apple 还在研究字体功能，例如可选择的“6”和“9”字形或非等宽数字。我猜他们也想将这些功能带到网络上。
Safari and Firefox use SF for -apple-system; Chrome recognizes BlinkMacSystemFont:
Safari和Firefox使用SF为-apple-system; Chrome 识别BlinkMacSystemFont：
body {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
There are also other variations:
还有其他变体：
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
You can demo these at the following fiddle; most are not supported yet: http://jsfiddle.net/v94gw9nx/
您可以在以下小提琴中演示这些；大多数尚不支持：http: //jsfiddle.net/v94gw9nx/
I got my info from Craig Hockenberry's article which has a lot of great info about using the font: http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/
我从 Craig Hockenberry 的文章中得到了我的信息，该文章有很多关于使用字体的重要信息：http: //furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/
Also, some great info on the Surfin' Safari blog about using abstracted system fonts: https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/
此外，Surfin' Safari 博客上有关使用抽象系统字体的一些重要信息：https: //www.webkit.org/blog/3709/using-the-system-font-in-web-content/
And apparently Apple is working with the W3C to standardize using a generic "system" font name in CSS. https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html
显然 Apple 正在与 W3C 合作，以在 CSS 中使用通用的“系统”字体名称进行标准化。https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html
Download the SF font .otf files for your own personal use: https://developer.apple.com/fonts/
下载 SF 字体 .otf 文件供您个人使用：https: //developer.apple.com/fonts/
回答by Ilias Karim
None of the current answers including the accepted onewill use Apple's San Francisco font on systems that don't have it installed as the system font. Since the question isn't "how do I use the OS X system font on a webpage" the correct solution is to use web fonts:
当前的所有答案（包括已接受的答案）都不会在未将其安装为系统字体的系统上使用 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");
}
回答by Ilias Karim
Last time tested: March 2018
上次测试时间：2018 年 3 月
To address the question
为了解决这个问题
How to use Apple's new San Francisco font on a webpage
如何在网页上使用 Apple 的新旧金山字体
font-family: -apple-system, system-ui, BlinkMacSystemFont;
or (even shorter):
或（甚至更短）：
font-family: -apple-system, BlinkMacSystemFont;
should suffice.
应该足够了。
If you want to default to system font on multiple platforms, though, I'd suggest:
但是，如果您想在多个平台上默认使用系统字体，我建议：
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;
-apple-system— San Francisco in Safari (on Mac OS X and iOS); Neue Helvetica and Lucida Grande on older versions of Mac OS X.system-ui— default UI font on a given platform.BlinkMacSystemFont— equivalent of-apple-system, for Chrome on Mac OS X."Segoe UI"— Windows (Vista+) and Windows Phone.Roboto— Android (Ice Cream Sandwich (4.0)+) and Chrome OS.Ubuntu— all versions of 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。
The idea is borrowed from the following issue on github.
You can look up fonts for other OS or older versions of them in this article on css-tricks.
您可以在 css-tricks 上的这篇文章中查找其他操作系统或更旧版本的字体。
回答by Andreas Kwiatkowski
-apple-system allows you to pick San Francisco in Safari. BlinkMacSystemFont is the corresponding alternative for Chrome.
-apple-system 允许您在 Safari 中选择旧金山。BlinkMacSystemFont 是 Chrome 的相应替代品。
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
Roboto or Helvetica Neue could be inserted as fallbacks even before sans-serif.
Roboto 或 Helvetica Neue 甚至可以在 sans-serif 之前作为后备插入。
https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-a(how or previously http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/do a great job explaining the details.
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/很好地解释了细节。
回答by Benjamin
If the user is running El Capitan or higher, it will work in Chromewith
如果用户运行 El Capitan 或更高版本，它将在Chrome 中使用
font-family: 'BlinkMacSystemFont';
回答by dors
Apple is abstracting the system fonts going forward. This facility uses new generic family name -apple-system. So something like below should get you what you want.
苹果正在抽象未来的系统字体。此工具使用新的通用系列名称 -apple-system。所以像下面这样的东西应该能让你得到你想要的。
body
{
font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
}
回答by jhohlfeld
This is an update to this rather old question. I wanted to use the new SF Pro fonts on a website and found no fonts CDN, besides the above noted (applesocial.s3.amazonaws.com).
这是对这个相当老的问题的更新。我想在网站上使用新的 SF Pro 字体，但没有发现字体 CDN，除了上面提到的 (applesocial.s3.amazonaws.com)。
Clearly, this isn't an official content repository approved by Apple. Actually, I did not find ANY official fonts repository serving Apple fonts, ready to be used by web developers.
显然，这不是 Apple 批准的官方内容存储库。实际上，我没有找到任何提供 Apple 字体的官方字体库，供 Web 开发人员使用。
And there's a reason - if you read the license agreement that comes with downloading the new SF Pro and other fonts from https://developer.apple.com/fonts/- it states in the first few paragraphs very clearly:
还有一个原因——如果你阅读了从https://developer.apple.com/fonts/下载新的 SF Pro 和其他字体所附带的许可协议——它在前几段中非常清楚地说明：
[...]you may use the Apple Font solely for creating mock-ups of user interfaces to be used in software products running?on Apple's iOS, macOS or tvOS operating systems, as applicable. The foregoing right includes the right to show the Apple Font in screen shots, images, mock-ups or other depictions, digital and/or print, of such software products running solely on iOS, macOS or tvOS.[...]
[...] 您可以仅使用 Apple 字体来创建用户界面模型，以用于在 Apple 的 iOS、macOS 或 tvOS 操作系统（如适用）上运行的软件产品中使用。上述权利包括在仅在 iOS、macOS 或 tvOS 上运行的此类软件产品的屏幕截图、图像、模型或其他描述、数字和/或印刷品中显示 Apple 字体的权利。[...]
And:
和：
Except as expressly provided for herein, you may not use the Apple Font to, create, develop, display or otherwise distribute any documentation, artwork, website content or any other work product.
除非在此明确规定，否则您不得使用 Apple 字体来创建、开发、展示或以其他方式分发任何文档、插图、网站内容或任何其他工作产品。
Further:
更远：
Except as otherwise expressly permitted [...] (i) only one user may use the Apple Font at a time, and (ii) you may not make the Apple Font available over a network where it could be run or used by multiple computers at the same time.
除非另有明确允许 [...] (i) 一次只能有一个用户使用 Apple 字体，并且 (ii) 您不得通过网络提供 Apple 字体，以便它可以由多台计算机运行或使用同时。
No more questions for me. Apple clearly does not want their Fonts shared across the web outside their products.
没有更多的问题要问我。Apple 显然不希望他们的字体在其产品之外通过网络共享。
回答by theroyakash
You can not use Apple System Font served directly from a database. It's against the License, but you can use this for Mac Systems higher than High Sierra
您不能使用直接从数据库提供的 Apple 系统字体。它违反许可证，但您可以将其用于高于 High Sierra 的 Mac 系统
body
{
font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
}
Or you can use this:
或者你可以使用这个：
font-family: 'BlinkMacSystemFont';
回答by bumfo
Last tested in 2015
最后一次测试是在 2015 年
Should use this solution as a last choice, when other solutions don't work.
当其他解决方案不起作用时，应将此解决方案用作最后的选择。
Original answer:
原答案：
Work on macOS Chrome/Safari
在 macOS Chrome/Safari 上工作
body { font-family: '.SFNSDisplay-Regular', sans-serif; }
