text-decoration-skip-ink是专为解决下划线切穿g、j、y、p等字母下降笔画而设的css属性，chrome64+、firefox70+、edge79+原生支持；设为auto可智能避开字形墨迹，none则强制连续穿过，仅在text-decoration:underline时生效。
text-decoration-skip-ink 是什么，什么时候必须用它
这个属性专门解决下划线「切穿小写字母」的问题——比如 g、j、y、p 的下降笔画被直线横穿，视觉上像被割断，影响可读性。它不是锦上添花的装饰选项，而是现代排版中提升文字清晰度的必要控制点。Chrome 64+、Firefox 70+、Edge 79+ 已原生支持，无需前缀。
text-decoration-skip-ink: auto 和 none 的实际表现差异
两者只在有下划线（text-decoration: underline）时生效，且必须配合字体渲染才能看出区别：
-
text-decoration-skip-ink: auto：默认行为，浏览器自动检测字形轮廓并避开墨水区域；对font-family: "Inter", sans-serif或系统默认字体效果明显 -
text-decoration-skip-ink: none：强制下划线连续穿过所有字符，包括下降部；适合调试或特殊设计意图（如强调断裂感） - 注意：
text-decoration-skip-ink: all不是合法值，不要写
为什么写了没反应？常见失效原因
这个属性非常“娇气”，以下情况会导致它完全不生效：
- 没声明
text-decoration，比如只写了text-decoration-skip-ink: auto但漏了text-decoration: underline - 用了旧写法
text-decoration-skip: ink—— 这个值早在 2019 年就被移入独立属性text-decoration-skip-ink，现在写会直接被忽略 - 字体本身没有清晰的下降部轮廓（比如某些手写体、图标字体），浏览器无法提取路径，跳过逻辑失效
- CSS 优先级被更高权重的规则覆盖，例如父元素设了
text-decoration: none，子元素再设skip-ink也无意义
推荐搭配使用的其他 text-decoration 属性
单独用 text-decoration-skip-ink 效果有限，建议组合设置：
- 加粗下划线：用
text-decoration-thickness: 2px配合text-decoration-color: #007bff，避免细线在跳过时显得断续 - 控制位置：加上
text-underline-offset: 4px（支持 Chrome 87+/Firefox 89+），给跳过留出足够空间，尤其在大字号或行高较小时 - 兼容降级：对不支持的旧浏览器（如 IE、老 Safari），下划线虽不跳过，但至少保持可读；不需要 JavaScript 检测或 polyfill
真正容易被忽略的是：跳过行为依赖字体的 OpenType 轮廓数据和浏览器的路径解析能力，同一段 CSS 在不同字体、不同字号下表现可能不一致——上线前务必在目标字体和典型字号下实测 gjy 这几个字母。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
