text-decoration-thickness必须与text-decoration-line配合使用，单独设置无效；推荐用0.08em单位并搭配text-underline-offset避免压字；firefox不支持且@supports检测不可靠，需用::after降级。

text-decoration-thickness 必须和 text-decoration-line 一起用

单独写 text-decoration-thickness: 2px 不会显示任何下划线——它只是“粗细”，不是“开关”。浏览器必须先知道你要画哪条线，才会渲染并应用粗细。

常见错误是只设粗细、忘了声明类型，或者误以为 text-decoration: underline 已隐含全部能力。其实它默认只启用最基础样式，子属性需显式设置或用简写补全。

• 正确写法一（分步）： text-decoration-line: underline; text-decoration-thickness: 0.08em
• 正确写法二（简写）： text-decoration: underline solid currentColor 0.08em（注意顺序：line style color thickness）
• 错误写法： 只有 text-decoration-thickness: 2px —— 没 line，没效果

单位选 em 还是 px？优先用 0.08em

用 px 固定粗细，在小字号下可能太粗、大字号下又太细；em 随 font-size 缩放，更适合响应式场景。实测 0.08em 是较稳妥的起始值，接近多数字体在 16px 下的默认下划线视觉粗细。

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

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

下载

• 推荐：text-decoration-thickness: 0.08em
• 可用但需测试：text-decoration-thickness: 2px（适合固定字号布局）
• 避免：text-decoration-thickness: 0.5ex（不同字体 x-height 差异极大，Safari 支持不稳定）

粗线必须配 text-underline-offset，否则容易压字

text-decoration-thickness 只管粗细，不管位置。粗线会让视觉重心下移，尤其在小字号或带 descender 的字母（g/y/q）上，容易“吃掉”下伸部分，看起来像被截断。

• 默认 text-underline-offset 是 auto，但各浏览器计算逻辑不一致，加粗后更容易偏高
• 手动设正值更可靠：比如 text-decoration-thickness: 2px 时，建议同步设 text-underline-offset: 4px（约等于粗细的 2 倍）
• 避免负值（如 -1px），Firefox 和部分 Safari 版本会渲染异常，线可能消失或错位

Firefox 不支持，@supports 检测不准，别信 fallback

截至 2026 年 7 月，Firefox 仍不支持 text-decoration-thickness（官方状态为 “Not planned”）。更麻烦的是，@supports (text-decoration-thickness: 1px) 在部分旧版 Chrome/Edge 中会返回 true，但实际不渲染——识别属性名却不实现功能。

这意味着不能靠 @supports 安全降级，也不能指望渐进增强自动兜底。

• 务实方案：用 ::after + border-bottom 重写下划线，完全可控且兼容 IE11+
• 若坚持用原生属性，至少加一层 fallback：text-decoration: underline; text-decoration-color: #0066cc; text-decoration-thickness: 0.08em —— Firefox 至少保留基础下划线

粗细本身不难调，真正容易被忽略的是三件事：必须配 text-decoration-line、必须调 text-underline-offset 配合粗细、以及 Firefox 兜底根本不可信。

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