英文排版错位主因是字体栈中缺失英文fallback导致基线偏移，需确保font-family顺序合理、lang属性正确设置及line-height比例适配英文字体度量。
英文排版错位通常不是字体问题，而是line-height、vertical-align或font-family栈中缺失系统英文 fallback 导致的基线偏移——尤其在混排中文时更明显。
为什么英文文字总“飘”在行中线上方或下沉
根本原因是浏览器对不同语言字体的度量（ascent/descent）处理不一致。当中文字体（如 "Noto Sans SC"）和英文字体（如 system-ui）共存于同一 font-family 栈，而英文部分实际渲染用了无 ascender 控制的 fallback 字体（比如某些 Linux 下的 DejaVu Sans），就会拉低整行基线。
- 检查是否在
tailwind.config.js的extend.fontFamily.sans中漏写了英文优先的 fallback，例如：['"Noto Sans SC"', 'Inter', 'system-ui', 'sans-serif']—— 把Inter这类现代英文无衬线放中文字体之后、system-ui之前 - 避免只写
['"Noto Sans SC"', 'sans-serif']：后者在 macOS 上可能 fallback 到Helvetica，在 Windows 上 fallback 到Arial，两者基线差异大 - 若用自定义字体（如
@font-face引入的IBM Plex Sans），确认其font-display: swap没导致首屏回退到系统字体，造成基线跳变
leading-tight 在英文段落里让文字贴顶怎么办
leading-tight 是相对比例（text-base 下为 1.25），但它对英文小写字母（如 x, a, e）的 ascender 高度压缩更敏感。一旦字号变小（如 text-sm），leading-tight 可能直接把字母顶部裁掉或挤压行内元素（如 sup、图标）。
- 英文正文优先用
leading-normal（比例 1.5），它比leading-tight更宽容，且与多数英文字体设计匹配 - 若必须紧凑，改用
leading-[1.3]或leading-[1.35]手动微调，而不是依赖预设类 - 对单行英文按钮/标签，别只靠
leading-tight压缩——加py-0.5或pt-px补一点上边距，比硬调行高更可控
列表项里英文编号和中文文字不对齐
list-decimal 渲染的数字高度由当前 font-family 决定；如果中文字体栈里英文 fallback 缺失或顺序错，数字可能用窄字体（如 monospace）渲染，导致宽度/基线与中文文字脱节。
- 确保
ol容器也继承相同的font-family栈，不要让它单独 fallback 到Times New Roman或Courier - 用
align-bottom替代flex items-center对齐：后者会强制所有子项按 flex 容器基线对齐，反而放大字体度量差异 - 若仍错位，加
text-[0.95em]微调数字大小，比改line-height更精准
hyphens-auto 对英文没反应？先看 lang 属性
hyphens-auto 在 Chrome/Firefox 中必须配合 lang="en"（或 lang="en-US"）才生效；没有该属性，浏览器不会启用连字符断词逻辑，break-words 就成了唯一兜底。
- 别只给外层容器加
lang：确保英文段落级元素（如p、div）自己带lang="en"，否则hyphens-auto不触发 - 验证是否生效：打开 DevTools → Elements → 查看该元素 computed style 中
hyphens: auto是否被激活（而非none） - Safari 默认支持，但若页面整体
lang设为zh-CN，子元素没显式覆盖，Safari 也不会对英文段落启用连字符
真正难调的不是某一行 CSS，而是字体栈顺序、lang 作用域和 line-height 比例三者之间的耦合——改一个，另外两个可能立刻暴露新错位点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
