letter-spacing 是控制中文字符间距的唯一可靠方案,因 word-spacing 仅在空格、制表符或换行符处生效,而中文无此类分隔符;它作用于字符级,需慎用继承与盒模型叠加,推荐 em 或 px 单位,并依字号微调负值。

letter-spacing 是唯一可靠的选择,word-spacing 对中文基本无效。
为什么 word-spacing 不管用
浏览器把连续中文(如 <td>用户信息</td>)当作一个“词”,而 word-spacing 只在真实空格、制表符或换行符处插入间隙。中文文本里没有这些分隔符,所以设了也白设。
- 哪怕写成
<td>用 户 信 息</td>,屏幕阅读器会读成“用 空格 户 空格 信 空格 息”,破坏可访问性 - 复制粘贴时带多余空格,影响数据清洗和搜索
- 响应式缩小时,空格可能触发意外换行
用 letter-spacing 控制每个汉字间距
它直接作用于字符级,中英文、标点、数字都生效,且效果均匀:
- 推荐单位:
em(随字号缩放)或px(精确控制),避免用百分比 - 安全负值范围:中文小字号下
letter-spacing: -0.03em是收紧临界点,再小易笔画粘连 - 别全局设在
body或table上——input、button、图标字体(如<i class="icon"></i>)都会被拉宽/压缩 - 正确写法:
td, th { letter-spacing: 0.05em; }
注意继承污染和盒模型叠加
letter-spacing 会向下继承,如果单元格里嵌套了 <strong></strong> 或 badge 类元素,它们也会被拉宽。需要显式重置:
.badge { letter-spacing: normal; }- 搭配
padding使用时,视觉留白 =padding-top+ (line-height × font-size − font-size)/ 2,不是简单相加 - 用
border-collapse: collapse后,padding是唯一能撑开内容与边框距离的手段,此时letter-spacing更需谨慎调值,避免文字顶到边框
真正难的不是加多少像素,而是让不同字号、不同字体、不同设备下的汉字间距看起来“松紧刚好”——这得靠真机预览,不是靠理论值。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











