事实上，旧金山字体确实作为可变字体发布

苹果在 WWDC 2022 上 发布 了其旧金山系统字体的扩展版本。然后，上个月，Jim Nielsen 将重点放在字体的变化上，解释 了字体如何根据**宽度**和**粗细**提供一系列变化。如果您还没有查看，这是一个非凡的阅读体验。

有了所有这些很棒的新选项，您可能会想要在网页设计中使用它们。Chris 也在自己的博客上 对扩展集表示赞叹 并思考

但目前尚不清楚我们如何在 CSS 中利用压缩、紧缩和扩展的变体，或者是否有计划允许这样做。我想我们最终可以浏览 Apple.com 并看看他们是如何做到的，如果他们开始在那里使用它们的话。

将其构建为可变字体并以这种方式发布所有内容难道不是很有道理吗？

事实证明，是的。确实很有道理。Chris 在一篇新文章中进行了后续报道

但就在昨天，我偶然发现了一个事实：**内置的旧金山字体（在内置了它的 Apple 设备上）已经是可变字体（!!）。**看，我当时正在使用 Roboto Flex，并使用system-ui作为后备字体，我注意到在 FOUT 期间，我使用的font-variation-settings对后备字体有影响，该字体在我的 Mac 上呈现为旧金山字体。这……除非我糊涂了……意味着旧金山字体是可变字体。

那么，关于如何使用它？当然，Chris 有一个演示

所有这一切都有一些需要注意的地方，最重要的是非 Apple 设备的回退。毕竟，该演示只是为字体系列调用system-ui——它没有告诉浏览器下载字体文件或任何其他东西，而且谁知道 Apple 是否会发布一个我们可以作为实际自定义网络字体提供的可变字体文件。

另一件有趣的事情？Chris 做了一些调查，并计算出该系统字体中包含 35 个布局特征。去阅读文章的其余部分以查看所有内容（并获得一份 Chris 的特色——我知道我很想念它们！）。

直接链接 →