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

根据研究，新创建的 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

例子：

  

    
  
    

  

    
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
    

  
            

输出：