用户界面字体排印详情

用户界面字体排印详情

学习如何为你的 app 制作出排版精美的用户界面，提升可读性、易用性，以及在各 Apple 平台的一致性。了解 San Francisco 字体系列的最新发展，包括如何将多种字体调整为适合阅读的大小与粗细等。我们还会为你介绍一些关于如何最大程度利用系统字体、支持多种自定义字体的内容。若要复习 San Francisco 字体系列及其基础原则的有关内容，请查看 WWDC15 的 “全新系统字体介绍”一节。

资源
相关视频

WWDC22
- 了解扩充的 San Francisco 字体系列
WWDC20
- SF Symbols 2
- SwiftUI 新功能
WWDC19
- SF Symbols 简介
下载

（你好 WWDC 2020）你好欢迎来到 WWDC
（用户界面字体排印详情）你好我叫 Loïc Sander 我是 Apple 设计团队的一名字体设计师在这次讲座中我将和我的同事 Jiang 一起向大家介绍优秀的用户界面字体排印的细节以及实现 app 排版的工具总的来说我们即将介绍的所有主题实际上都是关于在我们的平台上理解文本的动态行为首先我讲一下字型和它们与用户界面设计相关的方面然后 Jiang 将向你展示设计排版样式和布局时有用的 API 和最佳做法对于大多数人来说设计字体就像选择一种字型和磅值一样简单其实也应该如此
但我们的第一个话题我想告诉你改变文本的大小其实有很多微妙的影响了解视觉字号是更好理解易读性的关键这是你应该一直关注的重点
在视觉字号之后我再讲一下可变字型这种格式可以让我们改进平台上文本的行为也可以改善 app 的字体排印
然后我将介绍直接影响用户界面设计感的话题：字间距和行距它们是文本布局的重要组成部分所以绝对值得我们花时间去增加了解
最后但同样重要的是 Jiang 将深入探讨文本风格和动态字体这是我们的两个核心排版工具可帮助实现很棒的用户界面设计感这也将是一次回顾因为其中一些 API 不是新出现的但我们也有一些新的内容所以我们开始吧（视觉字号）为了描述什么是视觉字号我想回到几年前我们的主系统字型旧金山首次问世的时候我们的团队付出了很多努力以确保 SF 在任何磅值下看起来都很棒我们通过引入两个你们可能很熟悉的变体实现了这一点我们为小于 20 磅的字号设计了 SF Text 为大于 20 磅的设计了 SF Display 这些变体就是我们所说的视觉字号
它们能让我们更好地控制影响易读性的细节例如 SF Text 和 Display 字母之间的空间大小是为了适应两种实际情况：一个设计适用于小字号另一个适用于大字号
这两个设计之间的垂直比例也略有不同因此在相同的磅值下 SF Text 可能会显得稍大一些因此在使用小字号时更容易辨认
当我们推出这个设计时感觉像是一场小革命但我发现“革命”这个词很有趣我们通常认为它的意思是前进或进步但实际上它的意思是“回到起点” 因为你看自从字体排印被发明以来视觉字号一直是一个问题并且几个世纪以来一直是一个涉及实体物体的印刷过程几乎没有改变的确数字技术在处理文本方面给了我们更多的灵活性但在某种程度上它使字体排印比以前更加粗糙为了说明我的观点我想给大家展示一下自然环境下的视觉字号作为一个字体和历史爱好者我家里正好有这本 18 世纪的旧书这就是我们所称作的字体标本它包含了各种大小的字体排印示例我想向你展示其中的两个示例在这些页面中有着不同字号的同一设计也就是说两种不同的字型有点像 SF Text 和 Display 在今天的印刷单位中大约是 8 和 42 磅
现在我想让你们想象一下对于你们在这里看到的每一个字母都曾有一个完全相同大小的金属印章是手工制作的
这些所谓的印章是通过一个流程来设计的需要在钢制冲孔机上切割字形在成型过程中这些钢制的冲孔机被用于开始环节最终制造出一套铅字这正是金属印章的名字
看看这些字形的细节你就会知道这个手工过程受到了物理尺度的多大影响 8 磅字母看着很粗糙因为它的尺寸较小这说明了视觉字号会受制于分辨率
对于切割铅字的人来说这意味着设计要面对用金属和墨水在纸纤维上印刷的挑战而对于我们来说这意味着要处理矢量图形在像素网格上栅格化的挑战但不管你设计的是哪种输出视觉字号的改变都是为了平衡易读性和细节我这么说好像它们是独立的但可读性是由细节决定的与 SF Text 和 Display 一样这里的关键细节是字母之间的空间
当字体变小时字母之间往往需要更多的空间这样眼睛可以更容易地将它们区分开
当然字母本身也有更多有意义的细节比如字母较细的部分随着字母的变小有时需要变得更挺拔
然后一些细节可能会让你感到意外比如字母“i”上的点的位置但这样做是有意的要确保在小字号时“i”不会和“l”混淆因为间隙越小就越容易被墨水或像素填充
因此由于我们在这里需要考虑相对大小我们观察一下最初的按预期比例呈现的两个词这两个设计之间的差异现在感觉不那么明显了这就是视觉字号的目的它们平衡了易读性和美学特质使设计在各个比例上令人感觉舒适一致对于几个世纪前制作字型的人来说调整设计以适应其比例是一个相当直接的过程因为他们总是按照实际尺寸工作但另一方面数字字体设计也面临着一个不幸的挑战
因为你可以无限地缩放矢量图形实际上所有数字字型只包含每个字形的单个绘图所以字体设计师必须选择一个理想的尺寸来设计这就意味着你使用的大多数字型都是在一定字号范围内得以最好的发挥
当然字体设计师总是可以决定创建适合多种字号的多种字型但这不是我们可以轻易做出的决定因为这仍需要花大量的功夫更重要的是它成为了一个不太方便使用的字型家族所以在最初设计 SF 的时候我们非常仔细地考虑了这一点最终我们决定使用视觉字号但只设计两种
对我们来说这个决定比较容易做出因为 OS 可以自动在设计之间切换然后我们向所有人讲授 SF Text 和 SF Display 的存在让大家都有所了解多年来这已经成为了我们平台上最先进的技术但我们一直希望能进一步改进这个行为毕竟如果一个字型可以自动适应你选择的每个字号不需要你在 Text 和 Display 之间切换那不是很棒吗？其实这在几年前已经成为了可能可变字型是在 2016 年引入的是 OpenType 规范的演变当时规范的更新是为了应对网络字型的日益流行以及这项技术实际上是在测试现有字型格式的局限性这种格式从根本上改变了字形在字型中的存储方式字形不再局限于单个静态绘图它还可以描述每个点移动的方式以产生相关但不同的字形每一个运动或差量都与设计轴相连让软件来控制它们的行为
在这些轴中有一个是我们特别感兴趣的因为它专门用于执行视觉字号这使得我们可以更新 SF Pro 并改进现有的视觉字号但是这种新的动态行为确实在我们的 New York 衬线字体系统上显示了其潜力该系统对字号的不同适应情况更加明显
多亏了可变的视觉字号我们现在能够设计出完美适应比例的字体绕了一圈我们又要回顾物理字体的优点（采用可变字型）这也是为什么今年我们开始不再将视觉字号作为单独的字型现在合并的不仅是视觉字号还有字重
这意味着从现在开始我们的大多数系统字型将下载为单一可变字型尽管如此今年我们仍然会发布 Text 和 Display 字型以方便过渡（在设计工具中处理视觉字号）在设计工具中你应该能够找到用于可变字型的新控件主要以滑动条的形式显示字型的公共轴
但请注意它们是可选控件你仍然可以通过其预定义实例按常规方式使用该字型事实上当你使用我们的系统字型时通常最好保留这些预定义的实例
如果你使用的可变字型支持视觉字号你可以找到一个专用的滑动条它将覆盖特定范围的磅值原则上设计 apps 应该注意保持滑块的值与你使用的磅值同步
但情况并非总是如此根据 app 的不同改变磅值可能不会自动更新控件
如果你注意到你使用的磅值与滑动条上的值不匹配那么你需要自己设置滑动条
如果你使用的磅值超出了滑动条的范围也完全没问题只需将滑动条设置为最接近的值即可如果你在以前的 OS 上使用设计工具可变字型可能无法正常工作在这种情况下重新使用我们仍在提供的单独视觉字号更安全比如 SF Text 和 Display （用代码处理视觉字号）在代码中这是完全自动化的行为我们会处理保持视觉字号和磅值同步的工作当然这适用于我们的系统字型但也适用于你可能使用的任何自定义可变字型只要它有一个视觉字号轴（以下的 API 自动处理视觉字号）因此在了解了特定尺寸的字体排印的最新发展之后我想谈谈用户界面文本布局的两个基本原理字间距和行距
字间距是我们如何有效实现特定尺寸字体排印的重要组成部分我已经详细地讨论了视觉字号但是有一件事我没有提到那就是当你把视觉字号和字间距相结合时视觉字号会更加行之有效但首先字间距是什么意思？
好吧让我们先看看一种字型的字形它们已经包含了一定的空间
这个空间就是我们所说的“边位” 这是字形被绘制时所作出的设计并将其定义为文本的默认间距
但是正如我前面指出的文本需要不同的字母间距才能在任何磅值下都看起来美观
这种补偿初始空间的做法就是我们所说的“字间距” 它在某种程度上相当于 CSS 中的字母间距但是字间距具体是指在文本布局的字形之间添加空间的操作
我刚提到的内容或许有人会觉得困惑并想 “等等我以为这是字偶距”
这种混淆很常见但是字间距和字偶距是不同的事情
字距调整是一种只应用于某一对字母间距的微小修正字距调整也是由字体设计师创建的大多数情况下你根本不需要修改它
但说回字间距让我告诉你如何以及为什么在 SF 字型上使用它
即使你在设计字型时使用特定大小的间距就像我们为 SF Text 和 Display 所做的那样如果你想获得精美的结果使用字间距仍然是正确的
如果没有字间距在 SF Text 和 Display 的字号为 20 磅时从一种字型切换到另一种原生间距的差异将成为一个问题
请注意最后一条蓝线和第一条橙线的长度几乎相同尽管它们的磅值不同
这是因为它们默认的间距不同而这种急剧的变化正是我们使用视觉字号作为字间距的原因
这确实是系统字型行为的一个重要部分也是我们发布字间距表作为 Apple Design Resources 一部分的原因因为如果你想准确地再现系统字型的行为你需要知道对每个磅值应用多少字间距今年随着 SF Pro 成为可变字型在 20 磅左右时不再有急剧的变化设计现在在 17 和 28 磅之间从 Text 过渡到 Display
由于行为中潜在的变化我们不得不更新字间距表所以请注意当你在设计比较中使用新的 SF Pro 时你需要应用 17 磅 28 磅之间的一套新的字间距值（紧凑字间距）但当我们观察字间距曲线时我想指出最后一个问题一个字型实际上可以包含多个字间距表我们可以使用它来添加字间距值为紧凑的字符串提供帮助假设你遇到了字符串被截断的情况
你可能会使用字偶距 API 这个非常常见的解决方案但正如我前面指出的在这里使用字偶距并不理想
使用字间距 API 会更好因为它在语义上是正确的但更重要的是它允许OS 禁用可能与字间距冲突的排版特性比如连字特性（字距调整 API - 字间距 API）因为如果你用一个字偶距 API 来调整一个包含连字的单词那么这个连字会保留下来并破坏这个单词的节奏另一方面使用字间距 API 我们会为你拆除连字这使字间距更均匀
不过要想让一个字串合适最佳首选的解决方案是让它自动收紧那就是我们使用紧凑字间距表的时候使用这个 API 系统会尝试使字符串在合理的易读性范围内得以匹配因为字间距也不能太大对于这类情况最好采取截断的方法
使用此 API 的最后一个原因是它应用特定大小的字间距如果你自己应用字间距则必须通过手动来实现（文档字型的字间距）好了让我用一个小公告来总结字间距的话题（我们的系统用户界面字型有内置的字间距表）今年我们将启用对第三方字型的字间距（今年我们的平台将对任何字型启用字间距）（同时包含 TRAK 和 STAT 表）这意味着字型供应商可以开始在他们自己的字型中添加字间距表嵌入的字间距将应用于我们的平台前提是字型也包含一个 STAT 表
如果你应用 CTFont 视觉字号属性此类字型也可以在旧的 OS 上使用其字间距数据
好了我们已经讨论了字形之间的空间现在我们来看看另一种字体间距：行距
我想在这里再普及一下词汇问题以消除两个术语的歧义我们先来说一下行高（行高）默认情况下行高是字型的垂直高度限制你还可以将其视为两条基线之间的距离但是无论采用何种方法距离都是相同的
当两条线之间的距离增加时它们之间的距离被称为“行距线”
说点冷知识来帮助你记忆这个名字来自金属字体的时代当时在两行文字之间的间隔上有一块铅条（行高包含行距）这里需要注意的重要一点是当两行文字之间有行距时行高也包含行距所以这两个概念是相互依赖的如果你改变了一个就改变了另一个
大多数时候你不需要关心行距或行高因为我们已经在大多数用户界面组件中定义了它们但是让我给你们看两个例子在这两个例子中我们确实修改了行距
阿拉伯语是一种文字不断起伏的书写系统在一条给定的直线上它们会侵占上下行的视觉空间所以在这种情况下增加一些行距通常是有益的
出于这个原因我们在平台上为了阿拉伯语等受益于较高行高的语言环境应用了更高的行距
另一方面有时收紧行距是有帮助的让元素更加垂直紧凑例如在 watchOS 上我们在很多地方应用了窄行距在屏幕上最大限度地显示更多的信息
此类修改是通过使用文字样式来完成的 Jiang 稍后会给大家介绍
这两个例子很好地展示了我们如何努力设计 API 和排版特性通过使用已有的系统 API 大家将从我们每年进行的设计改进中获益至于新版本我们尽量让适配工作变得简洁这样可以让你的 app 随着时间的推移变得更好现在是我把话题交给 Jiang 的好时机他将向你展示更多关于我们为你提供的强大的字型和文本 API 多谢 Loïc 好在深入了解字体排印的细节之后让我们来谈谈文本样式和动态字体这两个重要的系统工具可以帮助你在 app 中创建美观且一致的字体排印
文本样式是 Apple 构建优秀用户界面的核心它们提供了一个框架支持灵活和一致的字体排印具有清晰的层次结构和足够的风格范围来满足大多数用户界面的需求（文本样式）文本样式是一组预定义的系统字型字重、磅值和行距值的组合它们被构建在一个提供排版层次结构的系统中使你更容易在 app 中实现清晰易读的布局
首先虽然定义的文本样式提供了广泛的字型大小来表示信息层次结构但有时仅靠字体大小还不足以突出更细微的差异
比如这里日历中年份和月份的标题可以看到它们使用了标准文本样式中的字重较粗的字体像这样的加重文本样式允许你使用相同的文本样式大小和不同的字重这被我们的系统 app 广泛使用当然你也见过这个邮件中的大标题导航栏这是使用加重的大标题文本样式现在我将展示如何在你自己的 app 中使用它
假设我们有一个使用标题 1 字型的标签我发现标题需要更显眼一点所以为什么不使用粗体字重呢？那么加重的标题 1 就是这样
这里我们不使用 UIFont preferredFont(withTextStyle:) API 我们使用 UIFontDescriptor API 来获得具有标题 1 文本风格的描述符然后我们将一个粗体符号特征应用于它使用粗体特征你将得到加重标题 1 文本样式它映射到 SF Pro 粗体
你可以将粗体符号特征应用到任何 NSFont、UIFont 或 SwiftUI 字型来创建该字型的加重变量
虽然该符号特征的名称是“粗体” 但该变体的实际字重取决于文本样式可以是中号、半粗体、粗体或是重体如前所述文本样式具有行高我们发现它适用于大多数情况但是有时你使用的空间比较有限因此节省行之间的空间会增加信息密度这个健身 app 就是一个例子或者在呈现大量文本时你可能想要给内容更多的喘息空间来改善阅读体验就像这里的地图一样在这些情况下你可以使用窄和宽的文本样式的行距变量（窄和宽行距的文本样式）在 iOS 和 macOS 中窄行距使线高降低 2 磅（标准行距-窄行距-宽行距）宽行距使线间距增加 2 磅在 watchOS 中调整幅度减少到了 1 磅
现在在这个例子中我们有一个像这样的很长的文本段落它使用的是正文文本样式现在它有 22 磅的线高假设我们想实验一下看看在更窄的线高下它会是什么样子我想你现在已经掌握窍门了一旦我们应用窄行距的符号特性文本看起来是这样的好了现在它有 20 磅的线高但对于这么长的一段文字来说这似乎太紧凑了那么宽行距呢？那会是什么样子呢？现在让我们尝试宽行距特征得到 24 磅的线高好了现在看起来舒服多了所以它实际上和我们刚才讲过的加重变量非常相似只是这一次我们运用了窄行距和宽行距的象征特征在今年新推出的功能中你也可以在 SwiftUI 中对文字样式字型进行行距调整
在整个系统中我们在 app 中使用了 New York 和 SF Pro 圆体就像这里的图书和提醒事项 app 一样但值得注意的是它们不仅仅作为独立的字体工作它们也非常适合我们的文本样式现在假设我们想要创建一个标签就像提醒事项一样让我们结合我们刚刚学过的加重文本样式我们从“今天”这样的文本开始并使用加重的大标题文本样式
目前它使用的是 SF Pro 粗体
我们来把圆角应用到文本上 fontDescriptorwithDesign API 你可以看到现在的字型已经切换到 SF Pro 圆体
因此我们引入了一个非常灵活的 API 允许你将这些设计应用到任何系统用户界面字型对于 AppKit 和 UIKit 来说 fontDescriptorwithDesign API 可以应用于任何用户界面字型
对于 SwiftUI 来说 API 有点不同在开始构造字型时应该传递设计而不是使用修饰符转换现有字型
当选择一个带有设计的文本样式时除了设计之外的一切都保持不变包括字型大小、字重和行高我知道你们中的许多人使用网络页面或在 app 中嵌入网络视图几年前 WebKit 引入了-apple-system 字型系列这样你就可以用它来使用 CSS 中的旧金山字型这已被广泛采用（通过 CSS 访问系统字型设计）现在带前缀的-apple 版本有一个标准名称：system-ui 今年早些时候我们将为 Apple 平台带来一套新的 CSS 字型家族名称比如 ui-round、ui-serif 和 ui-monospace 我很高兴地宣布今年文本风格是 macOS 中完全支持的 API （macOS 文本特征 API）我们将为所有 Cocoa app 引入一套新的 API 到 AppKit 这个 AppKit API 将支持所有的文本样式就像在 iOS 上一样字型大小被优化以匹配 macOS 的控件大小虽然没有动态字体支持但你可以获得我们刚刚介绍的文本样式的所有其他好处去年我们分享了这张 Catalyst-app 文本样式大小的图表实际上是 iOS 尺寸的 77% 今年 Catalyst app 的界面针对 Mac 进行了优化你会得到一套像这样的文本样式的新尺寸
你可以看到它们排列得很整齐所以你的 app 只需要最小的变化就可适配
如果你选择“缩放界面以匹配 iPad” 它将继续遵循 iOS 的 77%大小但如果你想要新的行为在 Xcode 中选择 “为 Mac 优化界面”选项就可得到
你可能已经知道在 iOS 中文本样式还有另一个维度：动态字体你选择的字型将根据偏好自动缩放
动态字体让人们可以控制文本样式的大小（文本样式和动态字体）它使文本对很多人来说更容易阅读所以你真的应该考虑在你的 app 中支持动态字体
通过同时使用系统字型 API 和文本样式你可以在 iOS 上自动选择这种行为但是在使用自定义字形时你也可以支持动态字体我将在本部分介绍如何做到这一点（动态字体缩放行为）好的我们刚刚展示的图表有很多需要注意的地方我希望你注意的一件事是不同的文本样式可能有不同的缩放行为在这里我们可以看到正文、标题和脚注文本样式如何随动态字体缩放当你使用自定义字型处理动态字体支持时也应该注意这一点正如我们所知字体排印对于品牌识别是至关重要的而你们中的许多人在创建 app 时都使用了为自己的 app 和品牌设计的自定义字型但是你仍然希望支持动态字体因为这对辅助功能至关重要
你希望你的 app 在文本大小偏好改变时做出相应的反应就像 iOS 系统的 app 那样要怎么做呢？
我们在过去的会谈中已经讨论过这个问题但仍然值得再次讨论因为这是多年来常见的问题
自从 iOS 11 以来我们引入了一个新的 UIFontMetrics 类它捕获了文本样式的动态字体功能并允许你将其应用到任意字型上
为了使用它让我们看一下这个例子首先像往常一样使用标准 UIFont API 从定制字型开始然后可以根据正文文本样式创建 UIFontMetrics 有了这个正文指标对象由 scaledFont API 生成的字型将进行缩放就像当文本大小首选项发生变化时正文文本进行缩放一样
值得注意的是你还可以使用它来缩放自定义布局的常量值比如这里的两个标签之间的间距自去年发布以来我们收到了来自 SwiftUI 开发者的大量反馈今年在 SwiftUI 中我们会让你做和 UIKit 中一样的字型缩放为了理解这一点让我们先在 SwiftUI ContentView 中加入一段文本到目前为止一切顺利当文本大小偏好发生变化时所有内容都会相应地缩放
现在我想使用 Avenir 字型中等字重 34 磅的文本我知道怎么做正如你所看到的它使用了我们想要的字型然而在 iOS 13 中问题是一旦你开始使用自定义字型它就会停止支持动态字体
在 iOS14 中它会自动缩放但为了确保标题有正确的缩放行为我将设置 relativeTo 参数以便它会相对于标题文本样式缩放
可以看到标题文本现在自动缩放了
让我们继续添加正文文本与添加标题文本的方式类似我们声明一段文本并将其分配给 VStack 中的文本
我甚至不需要使用 relativeTo 参数因为自定义字型在 iOS 14 中默认会相对于正文样式缩放
标题和正文现在都自动缩放了但是看起来我们可以利用好正文周围的内边距因为文本太接近边框和标题了
让我们添加一些内边距我们先从 20 磅的固定内边距开始
好多了现在如果内边距也能根据文本大小的变化进行缩放那不是很好吗？
我们可以利用新的 ScaledMetric 属性包装器来定义值为“20”的内边距
但它也可以相对于正文文本样式缩放
让我们看看这是否奏效可以看到文本周围的内边距与文本大小成比例缩放而不是固定大小
好下面是我们刚刚展示内容的重述 font(.custom API 有一个新的可选参数 relativeTo 用于指定你希望它相对于哪个文本样式进行缩放如果你跳过这个它会相对于正文缩放这是 iOS 14 中的一个行为改变你仍然可以使用 fixedSize 参数创建一个固定尺寸且完全不缩放的自定义字型
除此之外你还可以缩放常量就像 UIFontMetrics 对 ScaledMetric 属性包装器所做的那样好吧今天我们讲了很多基础知识这里有一些我想提醒大家的基本原则
我们提供了各种风格的精心设计的系统字型如SF Pro、SF Pro Rounded、 SF Mono 和 New York 我们鼓励你试一试（尝试使用系统字型如 SF PRO、 SF PRO round、SF MONO 和 NEW YORK）对于好的字体排印层次结构是很重要的而文本样式是构建这种层次结构的好工具（使用文本样式有助于创建排版层次结构）即使在使用自定义字型时你也应该有足够的选项来支持动态字体这对辅助功能很有帮助（考虑使用自定义字型支持动态字体）我们已经讨论了字体排印的许多重要细节比如字间距和行距你应该只在特殊情况下覆盖默认的系统行为并让系统为其余的行为替你把事情做好（只有在特殊情况下才覆盖系统行为）如果你必须在你的用户界面中使用自定义字间距记住它应该是特定尺寸的否则你为小尺寸提供的字间距在大尺寸上可能不太美观（自定义字间距应该是特定的大小）我希望你现在已经更好地理解了文本在我们平台上的行为以及你所使用的文本和字型 API 以便在你的 app 中实现出色的字体排印谢谢

// UIKit
label.attributedText =
    NSAttributedString(string: "hamburgefonstiv",
        attributes: [kCTTrackingAttributeName as NSAttributedString.Key: -0.5])

// SwiftUI
Text("hamburgefonstiv").tracking(-0.5)

12:45 - Allow tightening to use tight tracking from system fonts

// UIKit: UILabel
label.allowsDefaultTighteningForTruncation = true

// AppKit: NSTextField
textField.allowsDefaultTighteningForTruncation = true

// SwiftUI
Text("hamburgefonstiv").allowsTightening(true)

17:45 - Getting emphasized text styles

// Getting emphasized text styles

let label = UILabel()
label.text = "Ready. Set. Code."

if let descriptor = UIFontDescriptor
    .preferredFontDescriptor(withTextStyle: .title1)
    .withSymbolicTraits(.traitBold) {
    // 28 pt Bold on iOS
    label.font = .init(descriptor: descriptor, size: 0)
}

18:05 - Getting emphasized text styles APIs

// Getting emphasized text styles

// AppKit
let descriptor = NSFontDescriptor
    .preferredFontDescriptor(forTextStyle: .body)
    .withSymbolicTraits(.bold)
// 13 pt Semibold on macOS
let emphasizedBodyFont = NSFont(descriptor: descriptor, size: 0)

// UIKit/Catalyst
if let descriptor = UIFontDescriptor
    .preferredFontDescriptor(withTextStyle: .body)
    .withSymbolicTraits(.traitBold) {
    // 17 pt Semibold on iOS
    let emphasizedBodyFont = UIFont(descriptor: descriptor, size: 0)
}

// SwiftUI
let emphasizedFootnoteFont = Font.footnote.bold() // 13 pt Semibold on iOS

19:34 - Getting tight leading variant

// Getting tight leading variant
import UIKit

let label = UILabel()
label.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."

if let descriptor = UIFontDescriptor
    .preferredFontDescriptor(withTextStyle: .body)
    .withSymbolicTraits(.traitTightLeading)
    // 20 pt line height
    label.font = UIFont(descriptor: descriptor, size: 0)
}

19:49 - Getting loose leading variant

// Getting tight leading variant
import UIKit

let label = UILabel()
label.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."

if let descriptor = UIFontDescriptor
    .preferredFontDescriptor(withTextStyle: .body)
    .withSymbolicTraits(.traitLooseLeading)
    // 24 pt line height
    label.font = UIFont(descriptor: descriptor, size: 0)
}

20:03 - Getting tight/loose leading variant APIs

// Getting tight/loose leading variant

// AppKit
let descriptor = NSFontDescriptor.preferredFontDescriptor(forTextStyle: .headline)
    .withSymbolicTraits(.tightLeading) // Use .looseLeading for loose leading font
let tightLeadingFont = NSFont(descriptor: descriptor, size: 0) // 14 pt line height

// UIKit/Catalyst
if let descriptor = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .title1)
    .withSymbolicTraits(.traitTightLeading) { // Use .traitLooseLeading for loose leading
    let tightLeadingFont = UIFont(descriptor: descriptor, size: 0) // 36 pt line height
}

// SwiftUI
// Use .loose for loose leading font
let tightLeadingFootnoteFont = Font.footnote.leading(.tight) // 16 pt line height on iOS

20:56 - Access rounded system font design

// Access rounded system font design
import UIKit

let label = UILabel()
label.text = "Today"

if let descriptor = UIFontDescriptor
    .preferredFontDescriptor(withTextStyle: .largeTitle)
    .withSymbolicTraits(.traitBold)?
    .withDesign(.rounded) {
    // SF Pro Rounded Bold
    label.font = UIFont(descriptor: descriptor, size: 0)
}

21:08 - Access system font designs

// Access system font designs

// Use .serif for New York, .monospaced for SF Mono

// AppKit
let descriptor = NSFontDescriptor.preferredFontDescriptor(forTextStyle: .body)
    .withDesign(.rounded)
let roundedBodyFont = NSFont(descriptor: descriptor, size: 0) // SF Pro Rounded

// UIKit/Catalyst
if let descriptor = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .body)
    .withDesign(.rounded) {
    let roundedBodyFont = UIFont(descriptor: descriptor, size: 0) // SF Pro Rounded
}

// SwiftUI
let roundedBodyFont = Font.system(.body, design: .rounded) // SF Pro Rounded

25:05 - Support Dynamic Type with custom font in UIKit

// Support Dynamic Type with custom font in UIKit

if let customFont = UIFont(name: "Charter-Roman", size: 17) {
    let bodyMetrics = UIFontMetrics(forTextStyle: .body)
    
    // Charter-Roman scaled relative to body text style
    // in different content size categories.
    let customFontScaledLikeBody = bodyMetrics.scaledFont(for: customFont)
    label.font = customFontScaledLikeBody
    label.adjustsFontForContentSizeCategory = true

    // Scaling constant 10 relative to body text style.
    let scaledValue = bodyMetrics.scaledValue(for: 10)
}

26:25 - Support Dynamic Type with custom fonts in SwiftUI example

struct ContentView: View {
    let prose = "Apple provides two type families you can use in your iOS apps. San Francisco (SF). San Francisco is a sans serif type family that includes SF Pro, SF Pro Rounded, SF Mono, SF Compact, and SF Compact Rounded."
    @ScaledMetric(relativeTo: .body) var padding: CGFloat = 20

    var body: some View {
        VStack {
            Text("Typography")
                .font(.custom("Avenir-Medium", size: 34, relativeTo: .title))
            Text(prose)
                .font(.custom("Charter-Roman", size: 17))
                .padding(padding)
        }
    }
}

28:29 - Support Dynamic Type with custom fonts in SwiftUI

// Support Dynamic Type with custom fonts in SwiftUI

// Text with font Avenir-Roman, scaling relative to title text style.
Text("Typography").font(.custom("Avenir-Roman", size: 34, relativeTo: .title))

// Text with font Helvetica, scaling relative to body text style.
Text("Title").font(.custom("Helvetica", size: 17))

// Text with font Courier, always use fixed size, do not scale according to user setting.
Text("Fixed").font(.custom("Courier", fixedSize: 17))

// Constant 10, scaled relative to title text style.
@ScaledMetric(relativeTo: .title) private var spacing: CGFloat = 10.0

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。

提交你查询的内容时出现错误。请检查互联网连接，然后再试一次。

资源

相关视频

WWDC22

WWDC20

WWDC19