如何更改 SwiftUI 字体大小

在 SwiftUI 中为文本视图设置字体大小有两种方法。

• 固定尺寸
• 动态大小

什么是固定尺寸

无论用户偏好如何，固定字体大小都保持不变。

如何设置固定字体大小

要设置固定字体大小，我们在创建字体时指定了我们想要的大小。我们可以为系统字体和自定义字体设置此项。

系统字体

我们使用方法创建系统字体Font.system(size:weight:design:)。这个方法让我们指定一个我们想要的固定字体大小。

下面是一个示例，我们将第二个文本的字体设置为 36 磅的固定大小。

VStack {
    Text("Hello, world!")
    Text("Hello, world!")
        .font(.system(size: 36))
}

系统字体有多种变体供我们选择。您可能会注意到，该方法中有权重和设计参数Font.system(size:weight:design:)。

您还可以设置粗细和设计以及字体大小。

这是一个针对不同粗细和设计的固定系统字体示例。

VStack {
    Text("Hello, world!")
        .font(.system(size: 36))
    Text("Hello, world!")
        .font(.system(size: 36, weight: .semibold))
    Text("Hello, world!")
        .font(.system(size: 36, weight: .bold, design: .monospaced))
    Text("Hello, world!")
        .font(.system(size: 36, weight: .heavy, design: .rounded))
    Text("Hello, world!")
        .font(.system(size: 36, weight: .black, design: .serif))
}

自定义字体

为自定义字体设置固定字体大小与系统字体没有什么不同。唯一不同的是我们改用Font.custom(_:fixedSize:)方法。

下面是一个示例，我们使用固定大小为 36 磅的“American Typewriter”字体。

Text("Hello, world!")
    .font(.custom("AmericanTypewriter", fixedSize: 36))

请注意，我们在这里使用Font.custom(_:fixedSize:)，而不是Font.custom(_:size:). 您将在后面的部分中看到不同之处，我们将在其中探索自定义字体的动态大小。

自定义字体可以有不同的 weight 和 design，所以我们不能像系统字体那样将其指定为方法参数。我们必须手动指定自定义变体的名称。

这是 American Typewriter 不同字体样式的示例。

VStack {
    Text("Hello, world!")
        .font(.custom("AmericanTypewriter", fixedSize: 36))
    Text("Hello, world!")
        .font(.custom("AmericanTypewriter-Semibold", fixedSize: 36))
    Text("Hello, world!")
        .font(.custom("AmericanTypewriter-Bold", fixedSize: 36))
    Text("Hello, world!")
        .font(.custom("AmericanTypewriter-Condensed", fixedSize: 36))
    Text("Hello, world!")
        .font(.custom("AmericanTypewriter-CondensedLight", fixedSize: 36))
}

什么是动态尺寸

动态字体大小是我们根据其用法（文本样式）而不是确切的点大小来描述文本大小的一种方式。

Apple 目前有 11 种文本样式。

• 大标题
• 标题 1
• 标题 2
• 标题 3
• 标题
• 身体
• 大喊
• 小标题
• 脚注
• 标题 1
• 字幕 2

像这样定义大小的好处是适应性和可访问性。文本大小和粗细会自动响应粗体文本和更大字体等辅助功能。

下面是每个文本样式如何适应动态字体大小的示例。

将此与固定字体大小进行比较，后者始终保持不变。

如何设置动态字体大小

要设置动态字体大小，我们将文本样式或用途指定为系统字体。

系统字体

要为系统字体设置动态字体大小，我们使用Font.system(_:design:)方法创建它。

如您所见，尺寸和重量参数消失了，因为它们会根据用户偏好进行动态调整。

以下是大型动态字体大小（默认大小）上的五种文本样式的示例。

VStack {
    Text("Large Title")
        .font(.largeTitle)
    Text("Title 1")
        .font(.title)
    Text("Title 2")
        .font(.title2)
    Text("Title 3")
        .font(.title3)
    Text("Body")
        .font(.body)
}

这是 xxxLarge Dynamic Type 尺寸上的相同文本样式。

您可以从 Apple Human Interface Guideline中查看每种文本样式的字体大小和粗细。

自定义字体

动态调整字体外观不是一件容易的事。Apple 为我们做了繁重的工作，为系统字体的每种文本样式定义字体大小、粗细和行距，以确保它根据用户偏好可读。

幸运的是，我们可以在自定义字体上使用其中的一些优势（字体缩放）。

要使用与Apple 文本样式相同的比例因子制作自定义字体比例Font.custom(_:size:relativeTo:)，我们使用方法。

这是一个示例，我使用与 Apple 文本样式相同大小的自定义字体并使用相同的比例因子。

VStack {
    Text("Large Title")
        .font(.custom(
            "AmericanTypewriter",
            size: 34,
            relativeTo: .largeTitle))
    Text("Title 1")
        .font(.custom(
            "AmericanTypewriter",
            size: 28,
            relativeTo: .title))
    Text("Title 2")
        .font(.custom(
            "AmericanTypewriter",
            size: 22,
            relativeTo: .title2))
    Text("Title 3")
        .font(.custom(
            "AmericanTypewriter",
            size: 20,
            relativeTo: .title3))
    Text("Body")
        .font(.custom(
            "AmericanTypewriter",
            size: 17,
            relativeTo: .body))
}

如您所见，它以与系统文本样式相同的速度缩放。

Font.custom( :size:) 与 Font.custom( :size:relativeTo:)

还有另一种你应该知道的自定义字体的方法，Font.custom(_:size:).

该方法等同于Font.custom(_:size:relativeTo:)参数relativeTo设置为.body文本样式。

下面是一个使用Font.custom(_:size:)withFont.custom(_:size:relativeTo:)和 的例子Font.custom(_:fixedSize:)。

VStack {
    Text("Hello, world!")
        .font(.custom(
            "AmericanTypewriter",
            size: 17,
            relativeTo: .body))
    Text("Hello, world!")
        .font(.custom(
            "AmericanTypewriter",
            size: 17))
    Text("Hello, world!")
        .font(.custom(
            "AmericanTypewriter",
            fixedSize: 17))
}

它在大动态字体大小上看起来是一样的。

但是当我们将大小更改为 xxx large 时，Font.custom(_:fixedSize:)保持不变，而其他两个适应相同的比例因子。