中文行高需设为1.5左右并优先英文字体，避免混排塌陷与断行异常。应检查自定义字体度量、使用全角标点、禁用全局text-rendering: optimizeLegibility，确保中英文baseline一致。
中文默认行高太小，文字挤在一起
浏览器对中文的默认 line-height 基于英文字符高度设计，没考虑汉字笔画多、视觉重心低的特点。结果就是段落里中文字挨得太近，尤其在小字号（如 14px）下特别明显，读起来累。
直接设 line-height: 1.6 或更高不是万能解——它会同时拉大英文、数字和标点的间距，导致混排时出现“空洞感”。更稳妥的做法是用 line-height: normal 配合字体度量调整：
-
line-height: 1.5是较安全的起点，适用于多数中文字体（如"PingFang SC","Microsoft YaHei"） - 若用
@font-face引入自定义字体，务必检查其ascender/descender值是否合理，否则line-height计算会失准 - 避免用
line-height的绝对值（如20px），它在响应式场景下极易破坏垂直节奏
中英文混排时标点和空格塌陷
HTML 默认把连续空白符（包括中文全角空格、英文半角空格、换行）合并成一个空格，而中文排版里「句末标点后不加空格」「英文单词前后需留空」是硬规则。一旦塌陷，就出现 今天天气很好。Hello world. 这种粘连效果。
关键不是禁用 white-space，而是精准控制：
立即学习“前端免费学习笔记（深入）”；
- 给包裹混排文本的容器加
white-space: normal（默认值，确保换行正常） - 用
点击 Download - 中文引号、顿号、句号等必须用全角字符（
“”、，。），不能用英文符号（"", , .），否则浏览器按西文逻辑处理基线 - 警惕 Markdown 渲染器自动转义——有些会把
“变成“，而部分旧版 Safari 对这类实体行高支持不稳定
font-family 中文字体 fallback 链写错，导致英文被“中文化”
常见错误是把中文字体写在英文前面，比如 font-family: "Noto Sans CJK SC", Arial, sans-serif。这会让所有字符（包括英文字母）优先走中文字体，而中文字体里的英文往往字重偏细、x-height 偏小，和周围中文不协调。
正确顺序必须是：先指定英文主力字体，再挂载中文字体 fallback：
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}
-
-apple-system和BlinkMacSystemFont是 macOS/iOS 的系统字体，自带优化的中英文混排度量 - Windows 下
"Microsoft YaHei"必须放在Roboto之后，否则 Roboto 的英文会被跳过 - 不要省略
sans-serif，否则某些 Linux 系统可能回退到等宽字体（如Liberation Mono），中文显示异常
text-rendering: optimizeLegibility 在 Chrome 下引发中文断行异常
这个 CSS 属性本意是启用字体的 OpenType 特性（如连字、字距微调），但 Chrome 从 v89 开始对中文字体的 text-rendering 处理有 Bug：开启后，<p></p> 内含长段中文时可能出现意外换行，或标点被孤立在行首。
目前最稳的策略是按需启用，而非全局设置：
- 仅对纯英文内容（如代码块、品牌名）加
text-rendering: optimizeLegibility - 中文主体内容保持默认（
auto），或显式设为text-rendering: auto - 若必须用该属性，搭配
word-break: keep-all可缓解断行问题，但会牺牲英文单词内换行能力
中英文混排真正的难点不在 CSS 属性堆砌，而在字体度量的一致性——同一行里中文字的 baseline、x-height、ascender 如果和英文字不匹配，再调 line-height 也只是修修补补。所以选字体链比调样式更重要。
