说起表头文字间距的调整，letter-spacing确实是 CSS 中唯一靠谱的属性。但直接把它应用到th上？往往效果不佳——字体继承、内联子元素、Safari 渲染舍入误差，随便一个都可能导致失效。稳妥的做法是：用span将文字包裹起来，单独设置letter-spacing、display和font-variant-ligatures，避免与word-spacing混用，单位统一使用px。
letter-spacing 这个属性，确实是控制表头文字间距的唯一可靠选择，但直接写在 th 上，很容易被字体、继承或内联元素干扰，所以必须针对性地包裹或重置。
为什么给 th 直接设 letter-spacing 有时没反应
你可能遇到过这种情况：明明加了 letter-spacing: 2px，中文标题却纹丝不动，甚至英文单词被拉得离谱。原因主要有三个：
th继承了父级（比如table或body）的字体设置，而某些字体（如 Noto Sans CJK、PingFang SC）默认字距偏紧，letter-spacing叠加后视觉变化不明显。- 如果
th里嵌入了或图标字体（如），这些子元素会继承并应用同一间距，导致图标错位或文字断开。 - 部分浏览器（特别是 Safari iOS 16+）对小字号（≤14px）+ 正
letter-spacing渲染有微小舍入误差，需要配合transform: translateZ(0)强制触发 GPU 渲染才能稳定。
th 内文字单独调间距的稳妥写法
不要依赖全局样式或粗暴覆盖，而是用最小作用域精准控制：
- 把要调整间距的文字用
包裹，例如：用户编号 - 在 CSS 中只对该
span设置letter-spacing，同时显式重置display和font-variant-ligatures防止连字干扰：`.tight-title { letter-spacing: -0.5px; display: inline-block; font-variant-ligatures: none; }` - 避免使用
em或%单位——中文字体尺寸变化时，em会随font-size缩放，反而让“收紧”效果失效；统一使用px。
和 word-spacing 混用会出什么问题
有人想“中英文混合标题统一拉开”，顺手加了 word-spacing: 4px，结果发现中文完全没变，英文单词却裂开了（比如 “User Info” 变成 “User Info”）。这是因为：
word-spacing只在空格、制表符或换行符分隔的“词”之间生效；中文无空格分词，浏览器不识别“用户”“编号”为两个词。- 若标题里夹着英文或数字（如 “订单ID：ORD-2026”），
word-spacing会强行在冒号后、短横线处加空隙，破坏语义分组。 - 和
letter-spacing同时存在时，两者数值相加——比如letter-spacing: 1px+word-spacing: 3px，实际字符间可能达到 4px，远超预期。
移动端真机测试最容易漏掉的点
开发时在 Chrome 桌面端看着正常，一上 iPhone 就发现字距忽大忽小，尤其在折叠屏或动态字体缩放开启时。关键要检查：
- 是否使用了
viewport的text-size-adjust: auto（iOS 默认启用）——它会动态调整文字渲染密度，间接影响letter-spacing视觉表现；可加text-size-adjust: none锁定，但需确保可访问性不降级。 - 是否在
@media (prefers-reduced-motion: reduce)下遗漏了间距重置；部分系统动画降级策略会抑制字体微调。 - WebFont 加载期间 fallback 字体（如
system-ui）的默认letter-spacing与目标字体差异极大，建议用@font-face的font-display: optional+ 内联 style 预设基础间距。
真正难的不是加一个像素，而是让这个像素在所有字体、所有设备、所有加载状态下都稳定出现。别指望一次设置全局生效，表头文字间距必须当作独立排版单元来对待。
