Apple 系统字体大小的预览（例如正文、标注、标题等）？

Question

Text例如，当选择 的字体时，我们可以使用以下方法更改字体大小：

Text("Hello world").font(.system(.body))

在本例中，body 是Font.TextStyle具有以下选项的 a：

        case largeTitle

        case title

        case headline

        case subheadline

        case body

        case callout

        case footnote

        case caption

在决定为组件选择哪种字体时，我想了解该字体的外观。我发现这个苹果页面详细介绍了一些字体的规格：

但是，它们与 Font.TextStyle 并不 1:1 匹配，并且不包含预览。是否有任何地方可以预览一些更常见的动态类型尺寸（例如 xSmall、xxxLarge）？

Answer 1

我找到的唯一图片是这样的：

或者，您也可以在 SwiftUI 中轻松预览：

struct Font_Previews: PreviewProvider {
  static var previews: some View {
    let allTextStyles: [(Font.TextStyle, String)] = [
      (.largeTitle, "largeTitle"),
      (.title, "title"),
      (.headline, "headline"),
      (.subheadline, "subheadline"),
      (.body, "body"),
      (.callout, "callout"),
      (.footnote, "footnote"),
      (.caption, "caption"),
    ]

    assert(Set(Font.TextStyle.allCases) == Set(allTextStyles.map { $0.0 }), "Is one of the styles missing?")

    return
      ScrollView {

        VStack {
          VStack {
            Text("Extra small")
            ForEach(Array(allTextStyles.enumerated()), id: \.offset) { index, textStyle in
              Text(textStyle.1).font(.system(textStyle.0))
            }
          }.environment(\.sizeCategory, .extraSmall)

          Divider()

          VStack {
            Text("Default")
            ForEach(Array(allTextStyles.enumerated()), id: \.offset) { index, textStyle in
              Text(textStyle.1).font(.system(textStyle.0))
            }
          }

          Divider()

          VStack {
            Text("Extra extra extra large")
            ForEach(Array(allTextStyles.enumerated()), id: \.offset) { index, textStyle in
              Text(textStyle.1).font(.system(textStyle.0))
            }
          }.environment(\.sizeCategory, .accessibilityExtraExtraExtraLarge)
        }
    }
  }
}