中英文混排时letter-spacing不能统一设值，因拉丁字母横向空间大、汉字笔画密集，相同值会导致英文过松、中文过紧；应按lang属性分别设置，如[lang="en"]{letter-spacing:0.04em}、[lang="zh"]{letter-spacing:0.015em}。
中英文混排时 letter-spacing 为什么不能统一设值
因为拉丁字母天然横向空间大，汉字笔画密集，同一 letter-spacing 值在视觉上会造成英文过松、中文过紧。比如 letter-spacing: 0.05em 在 “User ID” 上显得稀疏，在 “用户编号” 上却像被压缩过。这不是渲染 bug，而是光学密度差异导致的必然结果。
常见错误是给整个 <table> 或 <div> 设一个全局值，结果验收时被设计打回——尤其标题栏里中英并列时，松紧割裂感极强。
- 别用
:lang(en)伪类依赖 HTML 的lang属性，内联英文（如按钮里的 “NEW”）常不匹配 - 更可靠的是显式标注语言：
<th lang="en">Name</th>+<th lang="zh">姓名</th> - 对应 CSS 写成：
[lang="en"] { letter-spacing: 0.04em; }和[lang="zh"] { letter-spacing: 0.015em; }
word-spacing 对中英文混排基本无效，别白费劲
word-spacing 只对以空格分隔的“词”起作用。中文没有空格分词机制，浏览器无法识别“用户”和“编号”是两个词，所以设 word-spacing: 10px 后，中文段落几乎没变化；但里面夹的英文单词（如 “log_abc123”）反而可能被撑开——因为下划线不被视为词边界，它仍算一个“词”。
典型误用场景：想靠 word-spacing 让中英混合按钮文字（如 “编辑 Edit”）两边等距，结果只有 “Edit” 被拉远，“编辑” 纹丝不动，还可能让 “Edit” 和后面图标错位。
立即学习“前端免费学习笔记（深入）”；
- 真正该用
letter-spacing控制单字/字符间距，不是word-spacing - 如果真要调节中英文之间的“间隙”，用
margin-left或padding包裹英文片段更可控 - 禁用
word-spacing配合white-space: nowrap—— 这种组合在表格里极易导致整行溢出
表格单元格里中英文混排，换行和间距得一起调
表格默认 white-space: nowrap，哪怕你写了 letter-spacing，长英文单词或连续中文也会撑破单元格，看起来像“间距失效”。其实它生效了，只是被溢出遮住了。
必须同时满足三个条件，中英文混排才既可读又不溢出：
- 给
<td>显式设white-space: normal - 加
overflow-wrap: break-word（别用已废弃的word-break: break-word） - 确保有宽度约束：要么父表设
table-layout: fixed+width，要么该<td>自己设width或min-width: 0（尤其嵌在 Flex/Grid 里时）
漏掉任意一项，letter-spacing 都可能变成“看不见的配置”。
移动端小字号下 letter-spacing 失效的真正原因
不是代码写错了，而是 Safari（iOS 16–17）和部分 Android WebView 对 <input>、<textarea> 的 letter-spacing 支持极差；另外，小字号（≤14px）下若用了 WebFont 但字体文件未加载完成，fallback 到 SimSun 等系统字体，其 kerning 表缺失，letter-spacing 只能微调，救不了底子。
最易被忽略的点：用无单位值（如 letter-spacing: 0.1）会被解析为 0.1px，多数浏览器舍入归零——DevTools 里看到 computed 值是 0.1，但人眼根本看不出变化。
- 小字号文本（如移动端正文）优先用
em：letter-spacing: 0.03em - 别在
<input>上硬套，改用<span>包裹静态标签文字来控制 - 打开 DevTools 的 Computed 面板，确认
letter-spacing是否被 crossed out，而不是只看 Styles 面板
