Style — font
This article is extracted from the chat log with AI. Please identify it with caution.

文档 https://developer.apple.com/documentation/swiftui/font

在 SwiftUI 中，设置字体可以通过 .font() 修饰符，它提供了多种方式来自定义文本的外观，包括使用系统字体、自定义字体、动态类型支持等。下面是具体内容指导：

1. 使用默认的系统字体 #

默认字体是 Apple 的系统优化字体 San Francisco（SF Pro），这是 SwiftUI 自动提供的样式。

示例代码： #

Text("Hello, SwiftUI!")
    .font(.body)
系统字体类型描述
.largeTitle大标题，用于页面的主标题，通常在顶部展示。
.title标题，与 .largeTitle 比小，用于次要标题。
.headline突出型文本，比如表单项的标题。
.subheadline次要的副标题或描述文本。
.body正常的正文文本。
.callout呼出内容，比如注释或引用。
.caption较小的内容，一般用于注释。
.footnote非常小的文字，用于边注或附加信息。

2. 使用系统字体，并自定义字体大小和权重 #

通过 .system(size:weight:design:)，可以完全控制字体的大小、粗细、字体设计样式。

示例代码： #

Text("Hello, Custom Font!")
    .font(.system(size: 24, weight: .bold, design: .serif))
参数描述
size字体大小，比如 16、24。
weight字体粗细，值包括 .regular、.medium、 .bold 等。
design字体设计风格，比如 .default、.serif、.monospaced。

3. 自定义字体（加载本地字体） #

如果你想使用自定义字体，比如你引入了外部字体文件（如 .ttf 或 .otf），SwiftUI 可以使用 自定义字体。具体步骤如下：

步骤 1：将字体文件导入项目 #

  1. 将 .ttf 或 .otf 字体文件拖入项目的资源文件夹（Assets 或直接放到项目根目录）。
  2. 在项目的 info.plist 文件中添加一项：
    • 键：Fonts provided by application
    • 值：字体文件的名称（例如：CustomFontName.ttf）。

步骤 2：在代码中使用自定义字体 #

通过字体文件的名字来设置字体。

Text("Hello, Custom Font!")
    .font(.custom("CustomFontName", size: 20)) // 替换 "CustomFontName" 为字体名称

注意事项： #

  • 确保字体名称与 .ttf 文件中定义的实际字体名称一致，而不是单纯的文件名。可以通过 macOS 的字体预览工具找到具体的字体名称。

4. 动态字体支持（Accessibility 支持） #

动态字体可以根据用户在 iOS 设置中的字体大小偏好进行自动调整。SwiftUI 支持动态类型的方式是使用 .font() 结合系统提供的命名。

例如：

Text("Dynamic Font Example")
    .font(.body) // 直接使用 .body，动态字体会自动调整大小

手动指定可缩放的动态字体 #

如果使用了 .system 或 .custom，也可以使字体随系统动态类型变化。

Text("Hello, SwiftUI!")
    .font(.custom("CustomFontName", size: 18))
    .dynamicTypeSize(.medium ... .xxLarge) // 最小和最大动态大小范围

5. 字体样式修饰符的组合 #

你可以结合多个修饰符自定义字体样式。以下是一些常见的修饰符：

  • .bold(): 设置加粗字体；
  • .italic(): 设置斜体；
  • .monospaced(): 使用等宽字体（类似代码文本）。
Text("Bold and Italic Font!")
    .font(.title)
    .bold()
    .italic()
    .monospaced() // 将字体设置为等宽字体

6. 动态调整大小以适应布局 #

SwiftUI 提供 .minimumScaleFactor() 来确保文本能够在有限的空间中缩小显示，而不是被截断。

Text("This is a very long text that might get truncated.")
    .font(.title)
    .lineLimit(1) // 限制为一行
    .minimumScaleFactor(0.5) // 自动缩小字体到 50%
  • lineLimit(1)：限制行数为 1 行。
  • minimumScaleFactor(0.5)：文本缩小至原尺寸的 50%。

7. 设置不同平台的字体 #

如果你针对 iOS 和 macOS 等多个平台开发应用，可能需要为不同平台设置不同的字体。

示例：检查当前平台 #

import SwiftUI

struct PlatformSpecificFont: View {
    var body: some View {
        Text("Platform Specific Font")
            .font(platformFont)
    }

    var platformFont: Font {
        #if os(iOS)
        return .system(size: 18, weight: .bold, design: .default)
        #elseif os(macOS)
        return .headline
        #endif
    }
}

8. 示例项目 #

以下展示如何设置字体大小、样式以及动态调整：

import SwiftUI

struct FontExampleView: View {
    var body: some View {
        VStack(spacing: 16) {
            // 默认字体
            Text("Default Font")
                .font(.body)

            // 系统字体
            Text("Custom System Font")
                .font(.system(size: 24, weight: .bold, design: .rounded))

            // 自定义字体
            Text("Hello with Custom Font!")
                .font(.custom("CustomFontName", size: 20)) // 确保字体已经导入
            
            // 加粗及斜体
            Text("Bold and Italic")
                .font(.title)
                .bold()
                .italic()
            
            // 动态缩小文本
            Text("This is a long text that may not fit in one line.")
                .font(.headline)
                .lineLimit(1)
                .minimumScaleFactor(0.5)
        }
        .padding()
    }
}

struct FontExampleView_Previews: PreviewProvider {
    static var previews: some View {
        FontExampleView()
    }
}

9. 字体与平台设计指南 #

请根据 Apple 的设计指南为不同类型的内容选择合适的字体：

  • 标题内容：使用 .title 或 .largeTitle。
  • 正文内容：使用 .body 或 .callout。
  • 说明性文字：使用 .footnote 或 .caption。

对于 iOS 和 macOS，现代设计通常推荐使用 Apple 提供的系统字体（如 .default），以获得一致的视觉体验。如果需要独特的品牌视觉，可以选择导入自定义字体。

Text #

在 SwiftUI 中，Text 的修饰方法可以按功能分为 字体样式、装饰线、布局与间距、颜色与背景 等类别。以下是详细分类的表格：

SwiftUI Text 修饰方法分类表 #

类别修饰器功能描述代码示例
字体样式.bold()将文本设置为粗体Text("Hello").bold()
.italic()将文本设置为斜体Text("Hello").italic()
.fontWeight()指定字重（.light, .bold, .semibold 等）Text("Hello").fontWeight(.bold)
装饰线.underline()添加下划线（支持颜色和样式）Text("Hello").underline(true, color: .red)
.strikethrough()添加删除线（支持颜色和样式）Text("Hello").strikethrough(true, color: .orange)
字体属性.font()设置字体样式（.title, .body 或自定义系统字体）Text("Hello").font(.system(size: 24, weight: .bold, design: .monospaced))
.kerning()调整字符间距（不影响连字）Text("Hello").kerning(10)
.tracking()调整字符间距（影响连字）Text("Hello").tracking(10)
布局与间距.lineLimit()限制文本行数Text("Long text...").lineLimit(3)
.lineSpacing()设置行间距Text("Hello").lineSpacing(10)
.multilineTextAlignment()设置多行文本对齐方式（.leading, .center, .trailing）Text("Hello").multilineTextAlignment(.center)
颜色与背景.foregroundColor()设置文字颜色Text("Hello").foregroundColor(.blue)
.background()设置文字背景颜色或视图Text("Hello").background(Color.yellow)
边框与填充.padding()添加内边距Text("Hello").padding(.horizontal, 10)
.border()添加边框Text("Hello").border(Color.gray, width: 1)
动态类型.font(.title)使用预设动态字体（支持系统动态类型缩放）Text("Hello").font(.title)
.scaledToFit()根据动态类型自动缩放字体Text("Hello").font(.system(size: 16)).scaledToFit()
高级效果.rotationEffect()旋转文本（支持 2D/3D 旋转）Text("Hello").rotationEffect(Angle(degrees: 45))
.blur()添加模糊效果Text("Hello").blur(radius: 1)
.shadow()添加阴影效果Text("Hello").shadow(color: .gray, radius: 2, x: 2, y: 2)

补充说明 #

  1. 动态字体与固定字体
    • 使用 .font(.title) 等预设样式时，字体会根据系统动态类型自动调整大小。 • 若需固定大小，需通过 .font(.system(size: 20)) 明确指定，但可能影响可访问性。

  2. 装饰线参数
    • .underline() 和 .strikethrough() 的 color 参数支持自定义颜色，例如 .underline(true, color: .green)。

  3. 多行文本优化
    • 结合 .lineLimit(nil) 和 .multilineTextAlignment(.leading) 可实现自适应多行布局。

  4. 高级布局技巧
    • 使用 .frame() 控制文本容器尺寸，例如 .frame(width: 200, height: 100)。

本文共 2083 字，创建于 Jan 12, 2025
相关标签： SwiftUI, Xcode, ByAI