各位观众老爷们，掌声在哪里！今天咱们就来聊聊CSS里一个有点意思，但又经常被忽视的小家伙——text-decoration-skip-ink。别看名字长，其实作用很简单，就是让你的下划线、上划线、删除线，在碰到文字下缘（比如字母’g’, ‘j’, ‘y’的尾巴）的时候，优雅地跳过去，而不是无情地穿过去。
好，废话不多说，咱们这就开始今天的讲座！
1. 什么是text-decoration-skip-ink？
首先，让我们来明确一下text-decoration-skip-ink到底是干嘛的。
简单来说，它控制的是文本装饰线（下划线、上划线、删除线）在绘制时，是否跳过字母的降部（descender）。降部指的是字母下伸的部分，比如’g’，’j’，’p’，’q’，’y’这些字母的下半部分。
如果没有text-decoration-skip-ink，这些装饰线会直接穿过这些字母的降部，看起来可能有点拥挤和不美观。而有了text-decoration-skip-ink，装饰线就会巧妙地绕开这些部分，让文字看起来更清晰，更易读。
2. text-decoration-skip-ink的取值
text-decoration-skip-ink主要有以下几个取值：
auto(默认值): 浏览器自行决定是否跳过。一般来说，浏览器会尽量避免装饰线与文字重叠，但具体表现可能因浏览器而异。none: 装饰线不跳过任何部分，直接穿过文字。all: 装饰线跳过所有文字，包括字母的降部和其他可能与装饰线重叠的部分。这个值在实际使用中比较少见，因为可能会导致装饰线与文字完全分离，失去装饰的意义。ink(已废弃): 这个值原本的意思是让装饰线跳过所有字形墨水（ink）可能出现的地方。但现在已经被废弃，不再推荐使用。
3. 代码示例：直观感受text-decoration-skip-ink的作用
光说不练假把式，咱们直接上代码，看看效果如何。
<!DOCTYPE html>
<html>
<head>
<title>text-decoration-skip-ink Demo</title>
<style>
body {
font-size: 24px;
font-family: sans-serif;
}
.no-skip {
text-decoration: underline;
text-decoration-color: red; /* 方便观察，设置颜色 */
text-decoration-skip-ink: none;
}
.auto-skip {
text-decoration: underline;
text-decoration-color: blue;
text-decoration-skip-ink: auto;
}
.all-skip {
text-decoration: underline;
text-decoration-color: green;
text-decoration-skip-ink: all;
}
.long-text {
width: 400px;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<h1>text-decoration-skip-ink 示例</h1>
<div class="long-text">
<p>这是一段包含g, j, y等字母的文本，用于演示<code>text-decoration-skip-ink</code>的效果。</p>
<p class="no-skip"><code>text-decoration-skip-ink: none;</code> 下划线不跳过字母下缘： gjy gjy gjy</p>
<p class="auto-skip"><code>text-decoration-skip-ink: auto;</code> (默认值) 浏览器自动决定是否跳过： gjy gjy gjy</p>
<p class="all-skip"><code>text-decoration-skip-ink: all;</code> 下划线跳过所有字母： gjy gjy gjy</p>
</div>
</body>
</html>将这段代码保存为HTML文件，用浏览器打开，你就能看到不同text-decoration-skip-ink取值的效果了。
none: 下划线直接穿过’g’, ‘j’, ‘y’的下缘，看起来有点难受。auto: 大多数浏览器会跳过字母下缘，让文字更清晰。all: 下划线与字母完全分离，效果可能不尽如人意。
4. 实际应用场景
虽然text-decoration-skip-ink看起来是个小属性，但在某些场景下，它可以显著提升用户体验。
- 链接样式: 在网页设计中，链接通常会使用下划线来表示。使用
text-decoration-skip-ink: auto;可以避免下划线与字母重叠，提高链接的可读性。 - 印刷排版: 在一些对排版要求较高的场景下，比如书籍、杂志等，
text-decoration-skip-ink可以帮助实现更精致的视觉效果。 - 特定字体: 有些字体本身的字形设计就比较紧凑，容易导致装饰线与文字重叠。使用
text-decoration-skip-ink可以缓解这个问题。
5. 兼容性问题
text-decoration-skip-ink的兼容性总体来说还不错，主流浏览器都支持。
| 浏览器 | 支持情况 |
|---|---|
| Chrome | 支持 |
| Firefox | 支持 |
| Safari | 支持 |
| Edge | 支持 |
| Opera | 支持 |
| Internet Explorer | 不支持 |
虽然IE不支持，但考虑到现在IE的使用率已经很低，所以可以忽略不计。
*6. 更深入的探讨：`text-decoration-`系列属性**
既然聊到了text-decoration-skip-ink，不妨顺便了解一下text-decoration-*系列的其他属性，它们可以让你更灵活地控制文本装饰线的外观。
| 属性 | 作用 |
|---|---|
text-decoration |
这是一个简写属性，用于同时设置text-decoration-line, text-decoration-color, text-decoration-style。 |
text-decoration-line |
指定文本装饰线的类型，可以是underline（下划线）, overline（上划线）, line-through（删除线）, none（无装饰线）。 |
text-decoration-color |
指定文本装饰线的颜色。 |
text-decoration-style |
指定文本装饰线的样式，可以是solid（实线）, double（双线）, dotted（点状线）, dashed（虚线）, wavy（波浪线）。 |
text-decoration-thickness |
指定文本装饰线的粗细。这个属性相对较新，可能需要注意兼容性。 |
text-underline-offset |
指定下划线与文字基线的距离。这个属性可以让你更精确地控制下划线的位置，避免与文字重叠。需要注意的是，这个属性的兼容性相对较新。 |
示例：打造个性化下划线
结合这些属性，我们可以创造出各种各样的个性化下划线。
<!DOCTYPE html>
<html>
<head>
<title>Custom Underline Example</title>
<style>
.custom-underline {
text-decoration: underline;
text-decoration-color: purple;
text-decoration-style: wavy;
text-decoration-thickness: 3px;
text-underline-offset: 5px; /* 稍微调整下划线的位置 */
text-decoration-skip-ink: auto; /* 确保跳过字母下缘 */
}
</style>
</head>
<body>
<p class="custom-underline">这是一段带有自定义下划线的文字，效果还不错吧？</p>
</body>
</html>这段代码会创建一个紫色的、波浪形的、粗细为3像素的下划线，并且下划线与文字基线有一定的距离，同时跳过字母下缘。是不是感觉瞬间高大上了许多？
7. 注意事项和最佳实践
- 不要滥用
text-decoration: none;很多开发者为了去掉链接的默认下划线，会直接使用text-decoration: none;。虽然这可以达到目的，但也可能影响用户体验，因为用户可能无法分辨哪些是链接，哪些不是。更好的做法是使用其他方式来区分链接，比如改变颜色、添加图标等。 - 考虑可访问性: 在使用
text-decoration-*系列属性时，要考虑到可访问性。确保文本装饰线与文字颜色有足够的对比度，以便视力障碍者能够看清。 - 关注兼容性: 虽然
text-decoration-skip-ink的兼容性还不错，但有些属性（比如text-decoration-thickness,text-underline-offset）的兼容性可能相对较新。在使用这些属性时，最好进行充分的测试，或者使用一些polyfill来提高兼容性。
8. 总结
text-decoration-skip-ink是一个简单但实用的CSS属性，它可以帮助你提高文本的可读性，改善用户体验。 结合text-decoration-*系列的其他属性，你可以创造出各种各样的个性化文本装饰效果。
记住，CSS不仅仅是用来美化页面的工具，更重要的是，它应该服务于内容，提升用户体验。 在使用CSS属性时，要始终考虑到可访问性和兼容性，确保你的网站能够被所有人访问和使用。
好了，今天的讲座就到这里，感谢大家的收听！希望大家以后在写CSS的时候，能想起text-decoration-skip-ink这个小家伙，让你的网页更加精致和专业。 散会！