CSS 文本装饰：text-decoration-thickness 与 underline-offset 的可读性

---

title: CSS 文本装饰：text-decoration-thickness 与 underline-offset 的可读性

keywords:

• text-decoration-thickness
• text-underline-offset
• 文本装饰
• 可读性
• 设计一致性

description: 介绍文本装饰相关属性，控制下划线厚度与偏移，避免下划线穿过字形并提高可读性，统一设计语言并兼顾可访问性。

categories:

• 文章资讯
• 编程技术

---

概述

text-decoration-thickness 与 text-underline-offset 允许控制下划线的视觉效果，避免穿过字形的干扰，提升链接与强调文本的可读性与美观性。

示例

a { text-decoration-thickness: 0.1em; text-underline-offset: 0.15em }

工程建议

• 设计与一致性：在全站统一装饰参数；为不同主题设置合理偏移与厚度。
• 可访问性：保持足够对比与可识别性；避免仅用颜色区分链接。
• 兼容：在旧浏览器回退到默认样式；测试不同字体下的效果。

参考与验证

• MDN 文本装饰属性文档：https://developer.mozilla.org/docs/Web/CSS/text-decoration