font: 'San Francisco',Helvetica,Arial,san-serif;
没有效果。我试过的答案this question,但@ font-face不是这里的解决方案。
解决方法
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使用SF作为-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 nightly版本上演示这些: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/