在网页内容中使用系统字体

2015年7月27日

作者：Myles Maxfield

网页内容的有时候设计目标是与其渲染所在的底层平台的整体美学风格相契合。实现这一点的方法之一就是使用平台的系统字体，这在 iOS 和 OS X 上可以通过在“font-family”CSS 属性中使用 -apple-system CSS 值来实现。在 iOS 9 和 OS X 10.11 上，这样做可以使用苹果的新系统字体 San Francisco。使用 -apple-system 还能正确地与 font-weight CSS 属性交互，以便在苹果的最新操作系统上选择正确的字体。

在不支持 -apple-system 的平台上，浏览器会简单地回退到 font-family 回退列表中的下一个项。这提供了一种很好的方式来确保所有用户都能获得出色的体验，无论他们使用哪个平台。

目前 w3c 正在讨论将此值标准化，以便作者可以直接指定 system。然而，这些讨论尚未达成共识，因此 WebKit 为此值添加了前缀。

使用任何其他机制来指定系统字体都无法保证会按照您的预期行为。这包括使用任何实现细节，例如以点号为前缀的字体族名称。

除了系统字体，iOS 还具有动态类型行为，这可以为您的内容提供额外的契合度和精修。这些文本样式不仅仅识别特定的字体族；相反，它们代表一个完整的样式，包括大小和粗细。因此，这些样式的特征在于赋予更通用的 font CSS 属性的值。支持的值有

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

欲了解更多信息，请参阅Antonio Cavedoni 出色的 WWDC 演示文稿或联系 @jonathandavis。