CSS中的text-underline-offset属性详解

描述
text-underline-offset属性用于控制文本下划线与文字基线之间的垂直距离。这个属性专门针对通过text-decoration: underline添加的下划线，可以精确调整下划线的位置，解决下划线过于贴近文字或与文字重叠的问题。

属性语法

text-underline-offset: auto | <length> | <percentage>;

属性值详解

1. auto：浏览器默认的偏移距离，通常为1-2px
2. ：使用具体单位（如px、em、rem）设置固定偏移
3. ：相对于字体大小（1em）的百分比偏移

基础用法示例
假设我们有一个带下划线的标题：

h1 {
  text-decoration: underline;
  text-underline-offset: 0.2em; /* 下划线向上偏移字体大小的20% */
}

实际应用场景

1. 解决下划线过近问题
   当使用较大字号时，默认下划线可能过于贴近文字：

   .title {
     font-size: 2rem;
     text-decoration: underline;
     text-underline-offset: 0.1em; /* 增加间距避免拥挤 */
   }
   

2. 处理特殊字体
   某些字体的降部（如g、y、j的尾部）较长，需要更大偏移：

   .special-font {
     font-family: "Some Font";
     text-decoration: underline red;
     text-underline-offset: 0.3em; /* 避免下划线穿过字母降部 */
   }
   

3. 多语言排版优化
   中文和英文混合时可能需要不同的偏移量：

   .multi-lang {
     text-decoration: underline;
     text-underline-offset: 0.15em; /* 中英文混合的优化间距 */
   }
   

与text-decoration-color配合使用
可以同时改变下划线颜色和位置：

.link {
  text-decoration: underline;
  text-decoration-color: #ff6b6b;
  text-underline-offset: 0.25em; /* 粉色下划线，位置下移 */
}

注意事项

1. 该属性只对text-decoration: underline生效，其他text-decoration值无效
2. 百分比值是相对于当前元素的字体大小（1em）
3. 负值可以使下划线向上偏移（靠近文字）
4. 不同浏览器对默认偏移量的处理可能略有差异

浏览器兼容性
现代浏览器（Chrome 70+、Firefox 70+、Safari 12.1+）均支持该属性，对于老旧浏览器需要考虑降级方案。

通过合理使用text-underline-offset，可以显著提升文本下划线的视觉效果和可读性。