SwiftUI 字体系统详解
在 iOS 应用开发中,文本排版是用户界面设计的关键元素之一。SwiftUI 提供了一套丰富而灵活的字体系统,让开发者能够轻松创建既美观又符合系统设计规范的文本样式。本文将深入探讨 SwiftUI 的字体系统,以及如何有效地使用它们来提升应用的用户体验。
SwiftUI 字体系统概述
SwiftUI 的字体系统主要分为三类:系统文本样式、自定义系统字体和自定义字体。这种分层设计使开发者既可以快速应用预设样式,又能在需要时进行精细的自定义。
系统文本样式(Text Style)
系统文本样式是 SwiftUI 提供的预定义字体样式,它们会根据用户在系统设置中的偏好自动调整大小,支持动态文字大小功能(Dynamic Type)。
Text("大标题").font(.largeTitle)
Text("标题").font(.title)
Text("正文内容").font(.body)
Text("图片说明").font(.caption)
以下是主要的系统文本样式及其用途:
样式 | 用途 |
---|---|
.largeTitle |
最大的标题样式,通常用于页面的主标题 |
.title |
标准标题,用于重要区域的标题 |
.title2 |
二级标题,比 title 稍小 |
.title3 |
三级标题,比 title2 稍小 |
.headline |
段落标题,通常使用粗体 |
.subheadline |
副标题,比 headline 小 |
.body |
正文样式,是默认的字体大小 |
.callout |
标注文本,稍小于正文 |
.caption |
说明文字,小字体,常用于图片说明或次要信息 |
.caption2 |
更小的说明文字 |
.footnote |
脚注样式,比正文小 |
.preformatted |
等宽字体,适用于代码显示(iOS 17+) |
自定义系统字体
当预设样式无法满足需求时,可以使用 .system()
方法创建自定义系统字体:
// 基本自定义
Text("自定义大小").font(.system(size: 16))
// 自定义大小、粗细和设计风格
Text("圆角粗体").font(.system(size: 16, weight: .bold, design: .rounded))
字体权重选项
-
.ultraLight
- 超细 -
.thin
- 细体 -
.light
- 轻体 -
.regular
- 常规 -
.medium
- 中等 -
.semibold
- 半粗体 -
.bold
- 粗体 -
.heavy
- 重体 -
.black
- 黑体
设计风格选项
-
.default
- 默认系统字体 -
.serif
- 衬线字体 -
.rounded
- 圆角字体 -
.monospaced
- 等宽字体 -
.italic
- 斜体(iOS 16+)
自定义字体
对于品牌专属字体或特殊设计需求,SwiftUI 支持使用自定义字体:
// 基本自定义字体
Text("品牌专属字体").font(.custom("Brand Font", size: 14))
// 支持动态文字大小的自定义字体
Text("可调整大小的自定义字体").font(.custom("Brand Font", size: 14, relativeTo: .body))
使用 relativeTo
参数可以确保自定义字体也能响应系统的动态文字大小设置。
字体修饰符
除了设置整体字体样式,SwiftUI 还提供了单独修改字体特定属性的修饰符:
Text("粗体文本").fontWeight(.bold)
Text("斜体文本").italic()
Text("小型大写字母").textCase(.uppercase)
Text("下划线文本").underline()
Text("删除线文本").strikethrough()
最佳实践
- 优先使用系统文本样式:自动适应用户偏好设置,提升无障碍性
- 保持层次结构:使用不同字体样式建立清晰视觉层次
- 慎用自定义字体:确保支持动态文字大小
- 考虑本地化:不同语言可能需要不同的文本空间
- 测试极端情况:在最大和最小文字大小设置下测试界面