好的，我们开始今天的讲座，主题是CSS文本修饰跳过：text-decoration-skip-ink的字形轮廓检测机制。 引言 text-decoration-skip-ink 是一个 CSS 属性，用于控制文本修饰（如下划线、上划线和删除线）如何与文本的字形交互。传统上，文本修饰会直接穿过字形的降部（descenders）和升部（ascenders），这可能导致视觉上的混乱。text-decoration-skip-ink 允许浏览器智能地中断文本修饰，使其“跳过”字形的墨水部分，从而提高可读性和美观性。 text-decoration-skip-ink 的取值 text-decoration-skip-ink 属性可以接受以下值： 值 描述 auto 浏览器决定是否跳过字形墨水。这是默认值。浏览器通常会尝试跳过降部和升部，但具体的行为取决于字体、渲染引擎和书写方向。 all 文本修饰总是跳过字形墨水。即使没有明显的降部或升部，也会尝试中断修饰线。 none 文本修饰从不跳过字形墨水。修饰线会直接穿过字形，不进行任何中断。 edges (实验性) 文本修饰仅在字形的边缘跳过墨水。旨在 …
CSS `text-decoration-skip-ink`：下划线跳过文字下缘
各位观众老爷们，掌声在哪里！今天咱们就来聊聊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，这些装饰线会直接穿过这些字母的降部，看起来可能有点拥挤 …