Meet the expanded San Francisco font family
System & Services 进阶 20m

认识扩展的 San Francisco 字体家族

Meet the expanded San Francisco font family

2022年6月6日

在 Apple 官方观看视频

一句话判断

San Francisco 字体家族在 2022 年迎来了重大扩展——新增了 SF Serif 和可变字体轴（Variable Font Axis），让你的排版精细度直接拉满。

这场 Session 讲了什么

苹果的 San Francisco（简称 SF）字体自 2015 年推出以来一直是苹果平台的系统字体。2022 年，苹果对这个字体家族做了大幅扩展。

新成员：SF Serif。 之前 SF 家族只有无衬线体（Sans Serif），现在加入了衬线体变体。SF Serif 和 SF Sans 共享相同的骨架比例，所以在同一个排版中混用时视觉上非常协调。这给开发者提供了一个”苹果官方的衬线体”选择，不用再引入第三方字体。

可变字体支持（Variable Fonts）。 SF 现在支持 OpenType 的可变字体技术。一个可变字体文件包含了多个轴（axis），比如字重（weight）、字宽（width）、光学尺寸（optical size）。你可以用 UIFont 或 SwiftUI 的 .font() 修饰符在这些轴上选择任意值，而不是局限于预定义的几个字重档位。

动态光学尺寸。 SF 的光学尺寸（Optical Size）功能会根据字号自动调整字母的笔画粗细和间距。大字号下笔画更细、间距更舒展；小字号下笔画加粗、间距更紧凑，以保证可读性。这个行为在系统和 SwiftUI 中是自动的。

新的排版 API。 SwiftUI 和 UIKit 中增加了更多的排版控制 API，比如行间距的精确控制、连字（ligature）的开关、以及数字样式（等宽数字 vs 比例数字）的选择。

值得深挖的点

可变字体是排版精细化的未来。 传统字体是”离散的”——你只能选择 Regular、Medium、Bold 等预定义字重。可变字体让你在 100 到 900 之间选择任意字重值。这对于响应式设计特别有用：在一个从 12pt 到 72pt 的标题系统中，你可以让字重随字号连续变化，而不是在几个档位之间跳变。

SF Serif 的设计意图。 苹果不是”随便做了个衬线体”。SF Serif 的 x-height、字间距和整体灰度都和 SF Sans 匹配，这意味着你可以在正文用 Sans、引言用 Serif，两者的视觉权重是平衡的。这种”系统级协调”是苹果字体设计的一贯理念。

代码片段

import SwiftUI

// 使用可变字体的精细字重
struct VariableFontExample: View {
    var body: some View {
        Text("Dynamic Weight")
            // 不再局限于 .regular, .bold 等
            // 使用 system 设计的可变字体
            .font(.system(size: 24, weight: .init(rawValue: 350)))
        
        // SF Serif 的使用
        Text("Serif Text")
            .font(.system(.body, design: .serif))
        
        // 等宽数字（适合表格和数值展示）
        Text("$1,234.56")
            .font(.system(.body, design: .monospaced)
                .monospacedDigit())
        
        // 精细的排版控制
        Text("Multi-line text with custom spacing")
            .font(.system(.body, design: .default))
            .lineSpacing(8)
            .tracking(0.5)  // 字间距微调
    }
}

// UIKit 中的可变字体
let font = UIFont.systemFont(
    ofSize: 20,
    weight: UIFont.Weight(rawValue: 0.35)  // 精细字重
)

// 使用 Serif 设计
let serifFont = UIFont.systemFont(
    ofSize: 17,
    weight: .regular,
    width: UIFont.Width.standard
)

最佳实践

  • 优先使用 .system 字体而非硬编码的 SF 字体名，这样系统会自动选择合适的变体。
  • 在展示数值数据时使用 .monospacedDigit()，防止数字宽度变化导致的列对齐问题。
  • 混合使用 Sans 和 Serif 时，保持相同的字重和字号，只改变 design 参数。
  • 在小字号（12pt 以下）场景中信任系统的光学尺寸调整，不要手动加粗。

还有什么值得关注

  • SF Serif 目前只在苹果平台上可用，如果你需要跨平台一致的排版，还是得用第三方衬线体。
  • 可变字体文件的体积比传统字体大，但对于系统内置字体这不构成问题。
  • SwiftUI 的 .font() 修饰符在 iOS 16 中新增了 design 参数，支持 .default、.serif、.monospaced、.rounded 四种变体。
  • 苹果在 Human Interface Guidelines 中更新了字体使用建议，新增了 Serif 的推荐使用场景。
WWDC 2022