css – 如何在一个网页上使用苹果的新旧金山字体

前端之家收集整理的这篇文章主要介绍了css – 如何在一个网页上使用苹果的新旧金山字体前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在网站上使用新的旧金山字体。我试过了:
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/

猜你在找的CSS相关文章