直接给th设letter-spacing大概率失效，须用span包裹文字并设置letter-spacing、display:inline-block和font-variant-ligatures:none，统一用px单位，必要时加transform:translatez(0)修复safari舍入误差。
直接给 th 设 letter-spacing 大概率失效，不是你写错了，是浏览器渲染机制和中文排版特性共同导致的——必须用包裹 + 显式重置才能稳定生效。
为什么 th 上设 letter-spacing 经常没反应
常见现象：加了 letter-spacing: 1px，中文标题看起来完全没变化，英文缩写却撑开了；或者小字号下 Safari 渲染抖动、间距忽有忽无。原因有三个：
-
th继承了table或body的字体设置，而 Noto Sans CJK、PingFang SC 等中文字体默认字距偏紧，letter-spacing叠加后视觉增量被抵消 -
th里嵌了<strong></strong>、图标<i class="icon-sort"></i>等内联元素，它们会继承并应用同一间距，导致图标错位或文字断开 - Safari iOS 16+ 对 ≤14px 字号 + 正
letter-spacing存在舍入误差，需强制 GPU 渲染才能稳定
th 内文字单独调间距的稳妥写法
不靠全局覆盖，也不依赖父级样式，而是用最小作用域精准控制：
- 把要调间距的文字用
<span></span>包裹，例如：<th><span class="tight-title">用户编号</span></th> - CSS 中只对该
span设letter-spacing，同时显式设display: inline-block和font-variant-ligatures: none，防止连字干扰 - 统一用
px单位，避免em随font-size缩放导致“收紧”失效
示例 CSS：
.tight-title { letter-spacing: -0.5px; display: inline-block; font-variant-ligatures: none; }
letter-spacing 和 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，远超预期
真正难处理的不是怎么调，而是调完之后在不同字体、不同字号、不同浏览器下是否一致——尤其是 Safari 对小字号的舍入误差，光靠 CSS 不够，得加 transform: translateZ(0) 强制触发 GPU 渲染才算稳住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
