根据研究,新创建的 Apple 旧金山字体对人眼来说很舒服。通常Apple的字体不能通过CSS在任何网页上使用。这些字体内置于 Apple 的产品中,但新的 San Francisco 字体可用于任何 Web 内容。 Craig Hockenberry 先生介绍了我们如何仅通过 CSS 在您的网页上使用该字体的过程。
句法:
body {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
Firefox 和 Internet Explorer 使用-apple-system;对于 chrome,我们使用BlinkMacSystemFont 。
注意:对于系统使用,您可以从这里下载 San francisco 字体。下载后,您已经安装了每个版本。
其他可用的变体:
- 字体系列:-apple-system-body
- 字体系列:-apple-system-headline
- 字体系列:-apple-system-subheadline
- 字体系列:-apple-system-caption1
- 字体系列:-apple-system-caption2
- 字体系列:-apple-system-footnote
- 字体系列:-apple-system-short-body
- 字体系列:-apple-system-short-headline
- 字体系列:-apple-system-short-subheadline
- 字体系列:-apple-system-short-caption1
- 字体系列:-apple-system-short-footnote
- 字体系列:-apple-system-tall-body
例子:
San Francisco font
GeeksforGeeks
Welcome To San francisco font
This font are pplicable
now in webpages
To apply this font on your web
site through CSS just follow the
body tag element in the style tag
输出: