如何在一个网页上使用苹果的新旧金山字体 [英] How to use Apple's new San Francisco font on a webpage

问题描述

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

I'd like to use the new San Francisco font on a site. I've tried:

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

无效。我已尝试过此问题的答案，但 @ font-face 不是这里的解决方案。

to no avail. I have tried the answers to this question, but @font-face is not the solution here.

推荐答案

Apple的新系统字体未公开曝光。 Apple已经开始提取系统字体名称：

Apple's new system font is not publicly exposed. Apple has started abstracting system font names:

这种抽象的动机是，操作系统可以更好地选择使用哪个面给定重量。苹果还在处理字体特征，例如可选择的6和9字形或非等宽数字。

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 for -apple-system ; Chrome可识别 BlinkMacSystemFont ：

Safari and Firefox use SF for -apple-system; Chrome recognizes 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

​​ Safari每夜在El Capitan中创建： http://jsfiddle.net/ngj4ntq0/

You can demo these on the Safari nightly build in El Capitan here: http://jsfiddle.net/ngj4ntq0/

我从Craig Hockenberry的文章获得了我的信息，该文章有很多关于使用字体的好信息：
http://furbo.org/2015/ 07/09 / i-left-my-system-fonts-in-san-francisco /

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/

此外，Surfin的Safari网志有关使用抽象系统字体的信息： https://www.webkit.org / blog / 3709 / using-the-system-font-in-web-content /

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/

显然苹果正在与W3C合作， CSS中的通用系统字体名称。 https://lists.w3.org/Archives/Public/www-style/2015Jul/ 0169.html

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

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

Download the SF font .otf files for your own personal use: https://developer.apple.com/fonts/

这篇关于如何在一个网页上使用苹果的新旧金山字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！