小编典典

如何在网页上使用Apple的新旧金山字体

css

我想在网站上使用新的San Francisco字体。我试过了:

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

无济于事。我已经试过这个问题的答案,但@font-face不是这里的解决方案。


阅读 396

收藏
2020-05-16

共1个答案

小编典典

苹果的新系统字体未公开。苹果已经开始抽象系统字体名称:

这种抽象的动机是让操作系统可以在给定的权重下更好地选择使用哪张脸。Apple还致力于字体功能,例如可选的“ 6”和“
9”字形或非等距数字。我猜想他们也希望将这些功能也带到网络上。

Safari和Firefox将SF用于-apple-system; Chrome可以识别BlinkMacSystemFont

body {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

还有其他变体:

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
2020-05-16