字距排版
同一行里字与字之间的横向间隙,调宽会显得疏朗,调窄会显得紧凑。
- 字挨得太紧
- 字和字之间松一点
- 标题字拉开一点
- 字距
- 字符间距
- 字间距
示例
把说不清的东西,变成能说清的词。
letter-spacing: 0;
Web / iOS / Android 对照
Web原生支持
平台通用范围
letter-spacing
CSS: letter-spacing
官方定义是「设置文字字符之间的间距」,并明确这个值是「加在渲染时字符之间的自然间距之上」—— 它是增量,不是绝对间距。取的是长度值。
iOS原生支持
平台通用范围
tracking
也叫 tracking(_:) · kerning(_:)
SwiftUI: Text.tracking(_:)
这一端有两个相近接口,官方把区别写得很清楚:tracking 的效果「与 kerning 相似,但增减的是尾随空白,而不是改变字符偏移」,而且「任何非零的 tracking 都会禁用非必要连字」,kerning 则尽量保留连字。更要紧的是官方那条 Important:两个修饰符同时加时,「视图应用 tracking 并忽略 kerning」。单位是点,不是长度或倍数。
Android原生支持
平台通用范围
letterSpacing
Compose: TextStyle.letterSpacing
官方描述是「在每个字母之间增加的空间量」。类型是 TextUnit,也就是可以写成 sp 或 em —— 三端的单位体系各不相同:这里是文字单位,iOS 是点,Web 是长度。
使用规范
什么时候用
- 全大写英文或短标题需要拉开呼吸感时
- 小字号正文显得糊成一团时
什么时候别用
- 中文正文大幅加宽字距,反而破坏词与词的自然分组时
- 想调整行与行的距离 → 那是行高,不是字距
容易混淆
给 AI 的提示词
这条词条还没有经过验证的实现提示词。