font-bold 无反应主因是字体不支持 font-weight: 700，会静默回退到最近可用字重；leading-tight（1.25）与 leading-relaxed（1.625）为相对行高，搭配不当易致文字截断，需结合字体度量与实际 computed 值调试。
font-bold 和 font-semibold 为什么有时没反应
加了 font-bold 却看不出变粗，大概率不是 class 写错了，而是字体本身不支持 font-weight: 700。Tailwind 的 font-bold 只是映射到 CSS 的 font-weight: 700，它不会“生成”字重，只是告诉浏览器“请尝试用 700”。如果加载的字体文件（比如 Google Fonts 链接）只包含 400 和 500，那 font-bold 就会静默 fallback 到最接近的可用值——可能还是 500，甚至 400。
实操建议：
- 打开浏览器开发者工具，选中元素，看
computed栏里的font-weight值是否真为700 - 检查字体引入链接是否带了对应字重，例如：
&fontweight=400,600,700 - 在
@layer base中显式声明 fallback 字体栈，确保system-ui或sans-serif在各平台都提供 600/700 支持 - 避免对
font-mono或某些旧版系统字体（如 Ubuntu Font）盲目叠加font-bold
leading-tight 和 leading-relaxed 的真实数值与适用场景
leading-tight 编译为 line-height: 1.25，leading-relaxed 是 line-height: 1.625——它们都是相对于当前 font-size 的无单位倍数，不是固定像素。这意味着同一类在不同字号下产生的实际行高完全不同。
典型误用：
- 给
text-4xl（≈3rem）标题加leading-tight，结果降部字母（g、y、p）被裁掉——因为 3rem × 1.25 = 3.75rem，而字体升/降部总和可能已超 4rem - 给小字号正文（如
text-xs）配leading-relaxed，行距过大显得松散，破坏密度 - 在响应式断点里直接写
md:leading-relaxed，但 Tailwind 默认不生成该变体，需手动在tailwind.config.js中扩展
自定义行高必须配置 theme.leading 吗
不一定。Tailwind 提供两种方式：
- 用命名类如
leading-9：必须先在tailwind.config.js的theme.extend.leading中定义，否则构建时不会生成对应 CSS - 用任意值语法如
leading-[1.4]或leading-[24px]：无需配置，JIT 引擎会按需生成，且支持小数、带单位值、甚至 CSS 变量（如leading-[var(--my-line-height)]）
注意：leading-[1.4] 是相对 font-size 的倍数，leading-[24px] 是绝对行高；前者更灵活，后者更适合精确控制容器高度。
font-weight 和 leading 搭配不当导致文字截断
大字号 + 小行高是最常见的视觉截断原因。例如 text-5xl（≈3rem）配 leading-4（默认配置中 ≈0.75rem），算下来 line-height 实际只有 ≈2.25rem，远小于字体自身所需空间，浏览器仍渲染完整字形，但父容器高度不够，导致上下边缘被裁切。
排查关键点：
- 打开开发者工具，查看该元素的
computed line-height和font-size比值，理想区间通常在1.2–1.8（中文字体建议 ≥1.4） - 若用了自定义字体，尤其要注意其 metrics（ascent/descent），某些 variable font 在
font-weight: 800下升部会明显变高，此时需同步调高leading - 避免对大标题用
leading-none或leading-tight，除非你明确知道该字体的排印特性
真正容易被忽略的是：行高问题往往不是孤立出现的，它常和字体加载顺序、font-display 策略、甚至父容器 overflow 设置耦合。调试时别只盯着 class，先确认 computed 值是否如你所设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
