中文字体行高需手动调整而非依赖默认类，因其ascender/descender度量大导致line-height:1.5视觉偏小，易裁切“龜”“龍”等字；推荐用leading-[26px]或leading-[1.55]精确控制，避免leading-6等数字后缀，并注意font-family声明与真机验证。

中文字体行高不能靠默认 leading-tight 或 leading-relaxed 硬套，必须结合字号、字体度量和实际渲染效果手动调。

为什么中文字体的 leading- 类总“不准”？

因为中文字体（如 "Noto Sans SC"、"PingFang SC"）的 ascender/descender 度量比西文字体大，浏览器按 line-height: 1.5 计算时，实际视觉行距常偏小——尤其在 text-lg 及以上字号下，“龜”“龍”“g”“y”等字形容易贴顶贴底甚至被裁。这不是 Tailwind 的 bug，而是字体本身特性 + 浏览器 line box 渲染逻辑共同导致的。

• 用开发者工具检查 computed 栏的 line-height 和 font-size 比值，中文字体理想区间通常是 1.4–1.75，不是默认的 1.5
• leading-normal 在中文字体下可能只渲染出 22px（而非理论 24px），需实测，不能依赖文档
• 同一 leading-6 在 text-base（16px）和 text-2xl（24px）下生成的像素值不同，但中文字体需要的“呼吸感”未必同比例放大

怎么给中文字体设一个靠谱的行高？

优先用带单位的 arbitrary value，绕过比例换算陷阱：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 设计稿明确要求「行高 26px」→ 直接写 leading-[26px]（Tailwind v3.3+ 开箱即用）
• 想保持响应式缩放但又比 leading-normal 松一点 → 用 leading-[1.55]（无单位小数，不随根字号变，语义清晰）
• 避免写 leading-6 这类数字后缀类：它对应 1.5rem，在非默认根字号下会失准；且无法精确匹配中文字体所需像素
• 若项目用的是 v3.2 或更早版本，leading-[26px] 需提前在 tailwind.config.js 的 theme.extend.lineHeight 里注册，否则无效

中文字体行高常见踩坑点

很多布局错位其实和行高无关，是误用了它的作用域：

• leading- 控制的是 line box 高度，不是容器高度。给 h-10 的按钮加 leading-6，文字不会垂直居中——得配 flex items-center 或改 h-6
• 在 flex 容器里对单个中文文本项设 leading-loose，容易因基线偏移导致相邻图标/徽章错位，应统一控制父容器的 space-y 或用 align-middle
• leading-none 或 leading-[1] 对中文字体极其危险，会压缩掉字体上下度量空间，造成字形溢出，连 “一” 字都可能显示不全
• 自定义中文字体栈时（如 font-chinese），务必在 tailwind.config.js 的 extend.fontFamily 下声明，且字体名加双引号：'"Noto Sans SC"'，否则 fallback 失效，行高计算也会异常

真正难的不是选哪个 leading- 类，而是意识到：中文字体排版的行高，本质是字体度量、CSS 行盒模型、容器约束三者博弈的结果。每次调整后，一定要在真实设备上用真机预览，尤其看小字号下标点是否悬出、大字号下降部是否被裁——像素级的偏差，往往藏在肉眼最不注意的地方。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！