← 返回 Web 词条Webletter-spacing原生支持点选数值,样本实时变化
字距
在 Web 上叫letter-spacing
CSS: letter-spacing
官方定义是「设置文字字符之间的间距」,并明确这个值是「加在渲染时字符之间的自然间距之上」—— 它是增量,不是绝对间距。取的是长度值。
同一行里字与字之间的横向间隙,调宽会显得疏朗,调窄会显得紧凑。
- 字挨得太紧
- 字和字之间松一点
- 标题字拉开一点
- 字距
- 字符间距
- 字间距
示例
把说不清的东西,变成能说清的词。
letter-spacing: 0;
其他平台的相似实现
iOS原生支持
tracking异名这一端有两个相近接口,官方把区别写得很清楚:tracking 的效果「与 kerning 相似,但增减的是尾随空白,而不是改变字符偏移」,而且「任何非零的 tracking 都会禁用非必要连字」,kerning 则尽量保留连字。
看 iOS 视角 →Android原生支持
letterSpacing同名官方描述是「在每个字母之间增加的空间量」。
看 Android 视角 →使用规范
什么时候用
- 全大写英文或短标题需要拉开呼吸感时
- 小字号正文显得糊成一团时
什么时候别用
- 中文正文大幅加宽字距,反而破坏词与词的自然分组时
- 想调整行与行的距离 → 那是行高,不是字距