San Francisco(SF) 是 iOS 中的系统字体。此字体的字体经过优化,可使文本获得无与伦比的易读性、清晰度和一致性。在此处下载 San Francisco 字体系列。要了解与系统字体集成的 Apple 设计的符号,请参阅 SF Symbols。
强调重要信息。使用字重、大小和颜色突出显示应用中最重要的信息。
如果可能,请使用一个字体。混合几种不同的字体会使你的应用看起来分裂且松散。请考虑使用一种字体,只需使用少量的字体变体和大小。
尽可能使用内置文本样式。内置文本样式可让你用视觉上截然不同的方式表达内容,同时保持最佳的可读性。这些样式基于系统字体,充分利用关键字体排印功能,如「动态类型」,可以自动调整每个字体大小的字距和行距。iOS 包括以下文本样式:
- 页面大标题
- 页面标题 1
- 页面标题 2
- 页面标题 3
- 文本标题
- 正文
- 标注
- 副标题
- 脚注
- 说明文字 1
- 说明文字 2
有关开发人员指南,请参阅 UIFontTextStyle。
确保自定义字体清晰易读。iOS 支持自定义字体,但通常难以阅读。除非您的应用对自定义字体有迫切的需求,例如用于品牌推广或创建沉浸式的游戏体验,否则最好使用系统字体。如果使用自定义字体,请确保它易于阅读,即使在小尺寸下也是如此。
为自定义字体实现辅助功能。系统字体会自动响应辅助功能,如「粗体文本」和「更大字体」。使用自定义字体的应用应当实现同样的功能,可以通过检查是否启用辅助功能、在更改时注册通知来实现。请参阅文本大小与字重。
动态字体大小
San Francisco 字体在小尺寸和大尺寸下都设计的清晰易读。「动态字体」通过选择首选文本大小,为读者提供了更多的灵活性。在 资源 中下载动态字体大小表格。
在响应文本大小更改时,确定内容的优先级。并非所有内容都同等重要。当某人选择更大的字体时,他们希望使其关心的内容更易于阅读,而不是希望屏幕上的每个字都更大。
较小 | ||||
---|---|---|---|---|
类型 | 字重 | 大小(点) | 行距(点) | 字距(1/1000em) |
页面大标题 | 常规 | 31 | 38 | +12 |
页面标题 1 | 常规 | 25 | 31 | +14 |
页面标题 2 | 常规 | 19 | 24 | -26 |
页面标题 3 | 常规 | 17 | 22 | -24 |
文本标题 | 中黑 | 14 | 19 | -11 |
正文 | 常规 | 14 | 19 | -11 |
标注 | 常规 | 13 | 18 | -6 |
副标题 | 常规 | 12 | 16 | 0 |
脚注 | 常规 | 12 | 16 | 0 |
说明文字 1 | 常规 | 11 | 13 | +6 |
说明文字 2 | 常规 | 11 | 13 | +6 |
小 | ||||
---|---|---|---|---|
类型 | 字重 | 大小(点) | 行距(点) | 字距(1/1000em) |
页面大标题 | 常规 | 32 | 39 | +12 |
页面标题 1 | 常规 | 26 | 32 | +14 |
页面标题 2 | 常规 | 20 | 25 | +19 |
页面标题 3 | 常规 | 18 | 23 | -25 |
文本标题 | 中黑 | 15 | 20 | -16 |
正文 | 常规 | 15 | 20 | -16 |
标注 | 常规 | 14 | 19 | -11 |
副标题 | 常规 | 13 | 18 | -6 |
脚注 | 常规 | 12 | 16 | 0 |
说明文字 1 | 常规 | 11 | 13 | +6 |
说明文字 2 | 常规 | 11 | 13 | +6 |
中等 | ||||
---|---|---|---|---|
类型 | 字重 | 大小(点) | 行距(点) | 字距(1/1000em) |
页面大标题 | 常规 | 32 | 39 | +12 |
页面标题 1 | 常规 | 26 | 32 | +14 |
页面标题 2 | 常规 | 20 | 25 | +19 |
页面标题 3 | 常规 | 18 | 23 | -25 |
文本标题 | 中黑 | 15 | 20 | -16 |
正文 | 常规 | 15 | 20 | -16 |
标注 | 常规 | 14 | 19 | -11 |
副标题 | 常规 | 13 | 18 | -6 |
脚注 | 常规 | 12 | 16 | 0 |
说明文字 1 | 常规 | 11 | 13 | +6 |
说明文字 2 | 常规 | 11 | 13 | +6 |
大(默认) | ||||
---|---|---|---|---|
类型 | 字重 | 大小(点) | 行距(点) | 字距(1/1000em) |
页面大标题 | 常规 | 34 | 41 | +11 |
页面标题 1 | 常规 | 28 | 34 | +13 |
页面标题 2 | 常规 | 22 | 28 | +16 |
页面标题 3 | 常规 | 20 | 25 | +19 |
文本标题 | 中黑 | 17 | 22 | -24 |
正文 | 常规 | 17 | 22 | -24 |
标注 | 常规 | 16 | 21 | -20 |
副标题 | 常规 | 15 | 20 | -16 |
脚注 | 常规 | 13 | 18 | -6 |
说明文字 1 | 常规 | 12 | 16 | 0 |
说明文字 2 | 常规 | 11 | 13 | +6 |
较大 | ||||
---|---|---|---|---|
类型 | 字重 | 大小(点) | 行距(点) | 字距(1/1000em) |
页面大标题 | 常规 | 36 | 43 | +11 |
页面标题 1 | 常规 | 30 | 37 | +12 |
页面标题 2 | 常规 | 24 | 30 | +15 |
页面标题 3 | 常规 | 22 | 28 | +16 |
文本标题 | 中黑 | 19 | 24 | -26 |
正文 | 常规 | 19 | 24 | -26 |
标注 | 常规 | 18 | 23 | -25 |
副标题 | 常规 | 17 | 22 | -24 |
脚注 | 常规 | 15 | 20 | -16 |
说明文字 1 | 常规 | 14 | 19 | -11 |
说明文字 2 | 常规 | 13 | 18 | -6 |
超大 | ||||
---|---|---|---|---|
类型 | 字重 | 大小(点) | 行距(点) | 字距(1/1000em) |
页面大标题 | 常规 | 38 | 46 | +11 |
页面标题 1 | 常规 | 32 | 39 | +12 |
页面标题 2 | 常规 | 26 | 32 | +14 |
页面标题 3 | 常规 | 24 | 30 | +15 |
文本标题 | 中黑 | 21 | 26 | +17 |
正文 | 常规 | 21 | 26 | +17 |
标注 | 常规 | 20 | 25 | +19 |
副标题 | 常规 | 19 | 24 | -26 |
脚注 | 常规 | 17 | 22 | -24 |
说明文字 1 | 常规 | 16 | 21 | -20 |
说明文字 2 | 常规 | 15 | 20 | -16 |
极大 | ||||
---|---|---|---|---|
类型 | 字重 | 大小(点) | 行距(点) | 字距(1/1000em) |
页面大标题 | 常规 | 40 | 48 | +10 |
页面标题 1 | 常规 | 34 | 41 | +11 |
页面标题 2 | 常规 | 28 | 34 | +13 |
页面标题 3 | 常规 | 26 | 32 | +14 |
文本标题 | 中黑 | 23 | 29 | +16 |
正文 | 常规 | 23 | 29 | +16 |
标注 | 常规 | 22 | 28 | +16 |
副标题 | 常规 | 21 | 28 | +17 |
脚注 | 常规 | 19 | 24 | -26 |
说明文字 1 | 常规 | 18 | 23 | -25 |
说明文字 2 | 常规 | 17 | 22 | -24 |
并非所有应用都将字距值表示为 1/1000em。点的大小基于图像分辨率, 144ppi 使用 @2x 的设计、 216ppi 使用 @3x 的设计。
更大的辅助功能字体大小
除了标准的动态类型大小外,系统还为有辅助功能需求的用户提供了一些更大的字体大小。
AX1 | ||||
---|---|---|---|---|
类型 | 字重 | 大小(点) | 行距(点) | 字距(1/1000em) |
页面大标题 | 常规 | 44 | 52 | +9 |
页面标题 1 | 常规 | 38 | 46 | +11 |
页面标题 2 | 常规 | 34 | 41 | +11 |
页面标题 3 | 常规 | 31 | 38 | +12 |
文本标题 | 中黑 | 28 | 34 | +13 |
正文 | 常规 | 28 | 34 | +13 |
标注 | 常规 | 26 | 32 | +14 |
副标题 | 常规 | 25 | 31 | +14 |
脚注 | 常规 | 23 | 29 | +16 |
说明文字 1 | 常规 | 22 | 28 | +16 |
说明文字 2 | 常规 | 20 | 25 | +19 |
AX2 | ||||
---|---|---|---|---|
类型 | 字重 | 大小(点) | 行距(点) | 字距(1/1000em) |
页面大标题 | 常规 | 48 | 57 | +8 |
页面标题 1 | 常规 | 43 | 51 | +10 |
页面标题 2 | 常规 | 39 | 47 | +10 |
页面标题 3 | 常规 | 37 | 44 | +11 |
文本标题 | 中黑 | 33 | 40 | +12 |
正文 | 常规 | 33 | 40 | +11 |
标注 | 常规 | 32 | 39 | +12 |
副标题 | 常规 | 30 | 37 | +12 |
脚注 | 常规 | 27 | 33 | +13 |
说明文字 1 | 常规 | 26 | 32 | +14 |
说明文字 2 | 常规 | 24 | 30 | +15 |
AX3 | ||||
---|---|---|---|---|
类型 | 字重 | 大小(点) | 行距(点) | 字距(1/1000em) |
页面大标题 | 常规 | 52 | 61 | +7 |
页面标题 1 | 常规 | 48 | 57 | +8 |
页面标题 2 | 常规 | 44 | 52 | +9 |
页面标题 3 | 常规 | 43 | 51 | +10 |
文本标题 | 中黑 | 40 | 48 | +10 |
正文 | 常规 | 40 | 48 | +10 |
标注 | 常规 | 38 | 46 | +11 |
副标题 | 常规 | 36 | 43 | +11 |
脚注 | 常规 | 33 | 40 | +11 |
说明文字 1 | 常规 | 32 | 39 | +12 |
说明文字 2 | 常规 | 29 | 35 | +13 |
AX4 | ||||
---|---|---|---|---|
类型 | 字重 | 大小(点) | 行距(点) | 字距(1/1000em) |
页面大标题 | 常规 | 56 | 66 | +5 |
页面标题 1 | 常规 | 53 | 62 | +6 |
页面标题 2 | 常规 | 50 | 59 | +7 |
页面标题 3 | 常规 | 49 | 58 | +8 |
文本标题 | 中黑 | 47 | 56 | +9 |
正文 | 常规 | 47 | 56 | +9 |
标注 | 常规 | 44 | 52 | +9 |
副标题 | 常规 | 42 | 50 | +10 |
脚注 | 常规 | 38 | 46 | +11 |
说明文字 1 | 常规 | 37 | 44 | +11 |
说明文字 2 | 常规 | 34 | 41 | +11 |
AX5 | ||||
---|---|---|---|---|
类型 | 字重 | 大小(点) | 行距(点) | 字距(1/1000em) |
页面大标题 | 常规 | 60 | 70 | +4 |
页面标题 1 | 常规 | 58 | 68 | +5 |
页面标题 2 | 常规 | 56 | 66 | +5 |
页面标题 3 | 常规 | 55 | 65 | +6 |
文本标题 | 中黑 | 53 | 62 | +6 |
正文 | 常规 | 53 | 62 | +6 |
标注 | 常规 | 51 | 60 | +7 |
副标题 | 常规 | 49 | 58 | +8 |
脚注 | 常规 | 44 | 52 | +9 |
说明文字 1 | 常规 | 43 | 51 | +10 |
说明文字 2 | 常规 | 40 | 48 | +10 |
并非所有应用都将字距值表示为 1/1000em。点的大小基于图像分辨率, 144ppi 使用 @2x 的设计、 216ppi 使用 @3x 的设计。
字体使用和字距
在界面模型中使用正确的字体变体。当你在像按钮和标签等这样的标准控件中使用 San Francisco 时,iOS 会根据点大小和用户的辅助功能设置自动应用最合适的变体。在界面模型中,对小于 19pt 的文本使用 SF Pro Text,对大于 20pt 的文本使用 SF Pro Display,并适当调整字母之间的间距。
iOS 使用San Francisco 作为拉丁语、希腊语和西里尔的系统字体,以及其他脚本的各种其他字体。
SF Pro Text | |
---|---|
大小(点) | 字距(1/1000em) |
6 | +41 |
8 | +26 |
9 | +19 |
10 | +12 |
11 | +6 |
12 | 0 |
13 | -6 |
14 | -11 |
15 | -16 |
16 | -20 |
17 | -24 |
18 | -25 |
19 | -26 |
SF Pro Display | |
---|---|
大小(点) | 字距(1/1000em) |
20 | +19 |
21 | +17 |
22 | +16 |
24 | +15 |
25 | +14 |
27 | +13 |
30 | +12 |
33 | +11 |
40 | +10 |
44 | +9 |
48 | +8 |
50 | +7 |
53 | +6 |
56 | +5 |
60 | +4 |
65 | +3 |
69 | +2 |
79 及以上 | 0 |
并非所有应用都将字距值表示为 1/1000em。点的大小基于图像分辨率, 144ppi 使用 @2x 的设计、 216ppi 使用 @3x 的设计。