css下划线离文字太近怎么办_text-decoration-thickness与offset调节

解决CSS下划线离文字太近问题的关键是使用text-underline-offset属性调整垂直偏移，配合text-decoration-thickness控制粗细，并优先选用ex或em单位以适配字体变化，同时通过@supports实现兼容性降级。

CSS下划线离文字太近，主要因为默认的 text-decoration（尤其是 underline）位置和粗细是浏览器预设的，无法直接控制垂直偏移。虽然 text-decoration-thickness 能调粗细，但真正影响“离得近不近”的关键是 text-underline-offset —— 它才是控制下划线与文字基线距离的核心属性。

用 text-underline-offset 抬高下划线位置

这是最直接有效的办法。该属性专门用于调整下划线（或上划线、删除线）相对于文字基线的垂直偏移量：

• 正值（如 4px、0.2em）会让下划线向下移动，远离文字，视觉上更“松”
• 负值（如 -1px）会向上靠，甚至可能穿过字形（慎用）
• 支持单位：px、em、rem、ex（推荐用 em 或 ex，更适配字号变化）

示例：

a { text-decoration: underline; text-underline-offset: 0.25em; }

text-decoration-thickness 的作用与配合技巧

这个属性只控制线的粗细，不影响位置，但粗线+小 offset 容易显得“压字”，所以常需和 offset 联动：

• 线越粗，越需要更大的 offset 来避免粘连（比如 thickness: 2px 时，offset: 0.3em 更舒适）
• 可设为 auto（浏览器默认）、from-font（字体自带推荐粗细），或具体数值
• 注意：它不能设为负值，也不影响位置逻辑

搭配写法：

h2 { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1.5px; }

兼容性提醒与降级方案

text-underline-offset 在 Chrome 89+、Firefox 70+、Safari 15.4+ 支持良好，但旧版 Safari（≤15.3）和 IE 完全不支持：

• 可用 @supports 做渐进增强
• 不支持时，下划线会回落到默认位置（略近），属于可接受退化
• 如需强兼容，可用 border-bottom 模拟（但会改变行高、影响对齐，慎用于内联文本）

安全写法示例：

a { text-decoration: underline; }
@supports (text-underline-offset: 0.2em) {
  a { text-underline-offset: 0.25em; text-decoration-thickness: 1.2px; }
}

字体本身也会影响视觉距离

不同字体的下降部（descender）深度、基线位置不同，同一 offset 在思源黑体和 Times New Roman 下观感可能差异明显：

• 衬线体（如 Georgia）通常 descender 更长，下划线容易显得更近
• 无衬线体（如 Inter、SF Pro）相对干净，offset 可稍小
• 建议在目标字体下实测，优先用 ex 单位（1ex ≈ 字体小写字母 x 的高度），比 px 更自适应

例如：text-underline-offset: 0.25ex 比 2px 更稳妥。

基本上就这些。调好 text-underline-offset 是关键，厚度只是锦上添花；单位选对、字体实测、兼容兜底，下划线就能既清晰又呼吸感十足。