San Francisco(SF) 是 iOS 中的系统字体。此字体的字体经过优化,可使文本获得无与伦比的易读性、清晰度和一致性。在此处下载 San Francisco 字体系列。要了解与系统字体集成的 Apple 设计的符号,请参阅 SF Symbols

字体排印 - 图1

强调重要信息。使用字重、大小和颜色突出显示应用中最重要的信息。

如果可能,请使用一个字体。混合几种不同的字体会使你的应用看起来分裂且松散。请考虑使用一种字体,只需使用少量的字体变体和大小。

尽可能使用内置文本样式。内置文本样式可让你用视觉上截然不同的方式表达内容,同时保持最佳的可读性。这些样式基于系统字体,充分利用关键字体排印功能,如「动态类型」,可以自动调整每个字体大小的字距和行距。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 的设计。