图标字体在 th 中字距失控，是因为 letter-spacing 同时作用于汉字和图标字符，而图标作为单个 Unicode 码点易被拉伸变形；稳妥做法是用 span 包裹纯文本并单独设置 letter-spacing、display: inline-block 和 font-variant-ligatures: none，图标保持原样不参与字距计算。
图标字体在 th 里为什么字距失控
直接给 th 设 letter-spacing，图标字体（如 Font Awesome 的 <i class="fa fa-user"></i>）常被撑开或错位，不是 CSS 写错了，而是图标字体本身自带内联 vertical-align 和继承的字距行为。它和中文标题混排时，letter-spacing 会同时作用于汉字和图标字符，而图标是单个 Unicode 码点渲染的“伪文字”，间距拉伸后容易变形、偏移甚至重叠。
- Font Awesome 6 默认给
i.fa加了vertical-align: -0.125em，会覆盖你写的vertical-align: middle - 图标字体通常用等宽设计，但
letter-spacing是按字符间隙算的，一个图标占一个“字位”，负值收紧可能让图标和紧邻汉字粘连 - 若
th同时含图标 + 文字 +<strong>，三者继承同一letter-spacing，但渲染基线不一致，视觉上就像“没对齐”
span 包裹文字 + 单独设 letter-spacing 才稳
别动 th 的全局样式，把要调间距的纯文本内容用 <span> 显式包裹，再单独控制。图标部分保持原样，不参与字距计算。
- 写法示例：
<th><i class="fa fa-user"></i><span class="th-text">用户管理</span></th> - CSS 只作用于
.th-text：.th-text { letter-spacing: 1px; display: inline-block; font-variant-ligatures: none; } - 必须加
display: inline-block：防止 Safari 对小字号letter-spacing渲染舍入误差 - 禁用连字：
font-variant-ligatures: none避免中文字体在某些引擎下因连字逻辑干扰字距表现
vertical-align 在图标+文字混合单元格里总失效？先查 display 计算值
给图标元素写 vertical-align: middle 没反应，90% 是因为它的 display 实际是 block 或被父容器 flex 布局压制。这个属性只对 inline、inline-block、table-cell 生效。
- 用 DevTools 查看图标元素的 computed
display值，不是inline就得手动设：i.fa { display: inline; vertical-align: middle; } - 如果用了 Bootstrap Icons 或自定义图标库，检查是否自带
vertical-align内联样式，用!important覆盖或改用类名重置 - 避免在
td上设line-height过小（比如line-height: 1），这会让行框高度不足以容纳图标+文字的基线对齐空间 - 真机测试时注意 iOS Safari 动态字体缩放开启状态，
em单位比px更抗缩放干扰
什么时候该切到 flex 而不是硬调 vertical-align
当表格单元格里出现多个图标、不同字号文字、或图标来自不同字体库（比如同时用 Font Awesome 和 Material Icons），vertical-align 就不再是可靠选项——它的对齐基准依赖行框 x-height，而不同图标字体的 ascender/descender 差异极大，微调数值永远追不上变化。
立即学习“前端免费学习笔记（深入）”；
- 稳妥做法：
td, th { display: flex; align-items: center; gap: 0.5em; }，然后把图标和文字都作为 flex 子项 - 图标需设
flex-shrink: 0，防止窄列下被压缩变形 - 文字部分用
flex: 1或固定min-width，避免换行错乱 - 注意兼容性：IE11 不支持 flex，若需支持，退回
display: table-cell+vertical-align组合，并统一图标字体来源
最易被忽略的是图标字体加载时机：Web Font 未就绪前 fallback 字体的 baseline 完全不同，vertical-align 数值会漂移。flex 方案不受字体加载影响，对齐稳定性高一档。
