如何在网页上使用苹果新旧金山字体
我想在网站上使用新旧金山字体。 我试过了：
font: 'San Francisco', Helvetica, Arial, san-serif; 无济于事。 我试过这个问题的答案，但@font-face不是这里的解决scheme。
苹果新的系统字体没有公开曝光。 苹果已经开始提取系统字体名称：
这种抽象的动机是操作系统可以更好地select在给定的权重下使用哪个面部。 苹果也正在研究字体特征，如可选的“6”和“9”字形或非等宽字体。 我猜，他们也想把这些function带到网上。
Safari和Firefox使用SF for -apple-system ; Chrome可识别BlinkMacSystemFont ：
body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
还有其他的变化：
font: -apple-system-body font: -apple-system-headline font: -apple-system-subheadline font: -apple-system-caption1 font: -apple-system-caption2 font: -apple-system-footnote font: -apple-system-short-body font: -apple-system-short-headline font: -apple-system-short-subheadline font: -apple-system-short-caption1 font: -apple-system-short-footnote font: -apple-system-tall-body
你可以在El Capitan的Safari夜间版本中演示这些： http ： //jsfiddle.net/ngj4ntq0/
我从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/
-apple-system允许你在Safari中select旧金山。 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（how or previously http://furbo.org/2015/07/ 09 / i-left-my-system-font-in-san-francisco /做一个很好的工作来解释细节。
目前的答案（包括被接受的答案）都不会在系统中使用苹果的旧金山字体作为系统字体。 由于问题不是“如何在网页上使用OS X系统字体”，正确的解决scheme是使用networking字体：
@font-face { font-family: "San Francisco"; font-weight: 400; src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
资源
如果用户运行El Capitan或更高版本，则可以在Chrome中运行
font-family: 'BlinkMacSystemFont';
使用Chrome / Safari
body { font-family: '.SFNSDisplay-Regular', sans-serif; }
苹果正在抽象着未来的系统字体。 该设施使用新的通用名称 – 苹果系统。 所以像下面的东西应该得到你想要的东西。
body { font-family: -apple-system, "Helvetica Neue", "Lucida Grande"; }
