文本装饰厚度 | CSS-Tricks

CSS 年鉴 → 属性 → T → text-decoration-thickness

Mojtaba Seyedi 于 2022 年 1 月 11 日

CSS 中的 text-decoration-thickness 属性设置元素中用于文本的装饰线的笔划厚度。text-decoration-line 值需要是 underline、line-through 或 overline，以反映厚度属性。

.text {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
}

语法

text-decoration-thickness: auto | from-font | <length> | <percentage>

值

auto: (默认) 允许浏览器为文本装饰线指定适当的厚度。
from-font: 如果第一个可用的字体具有指定首选厚度的度量，则它将使用该厚度；否则它将像 auto 值一样工作。
<length>: 任何带有单位的有效长度都将文本装饰线的厚度指定为固定长度。这将替换字体中的任何信息和浏览器默认值。
percentage: 将文本装饰线的厚度指定为元素字体中 1em 的百分比。
initial: 属性的默认设置，即 auto。
inherit: 采用父级的装饰厚度值。
unset: 从元素中删除当前厚度。

演示

在以下演示中更改 text-decoration-thickness 的值，以查看该属性如何影响元素的文本装饰。

它对于子元素是恒定的

为元素设置装饰后，其所有子元素也将具有该装饰。现在假设我们想更改其中一个子元素的装饰厚度。

p {
  text-decoration-line: underline;
  text-decoration-color: green;
  text-decoration-thickness: 0.2em;
}
 
p span {
  text-decoration-thickness: 0.1em; /* Doesn't work */
}

这行不通，因为祖先元素指定的装饰厚度无法被覆盖。为此，需要为元素本身设置装饰特异性。

p {
  text-decoration-line: underline;
  text-decoration-color: green;
  text-decoration-thickness: 0.2em;
}

p span {
  text-decoration-line: underline;
  text-decoration-color: green;
  text-decoration-thickness: 0.1em; /* It works! */
}

百分比和级联

对于此属性，长度将作为固定值继承，并且不会随字体大小进行缩放。另一方面，百分比将作为相对值继承，因此，随着字体变化，它会进行缩放。

p {
  text-decoration-thickness: 20%;
}
 
p span {
  font-size: 20px;
  text-decoration-line: underline;
  text-decoration-thickness: inherit; /* = 20% */  
}

以下演示显示了在继承情况下使用 em 和百分比值之间的比较，正如您所看到的，在左侧（我们使用 em 的地方）继承的值是固定长度。这意味着它不会随字体变化而缩放。然而，在右侧，文本继承了相对值（在本例中为 20%）；因此厚度随着字体变化而缩放。

虽然规范的当前工作草案提到了 text-decoration-thickness 的百分比值，但目前实际支持仅限于 Firefox。

与 `text-decoration` 一起使用

CSS 文本装饰模块级别 4 规范的当前工作草案包含 text-decoration-thickness 作为 text-decoration 简写属性中的一个值。

.link {
  text-decoration: underline solid green 1px;
}
 
/* The longhand equivalent */
.link { 
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: green,
  text-decoration-thickness: 1px;
}

虽然 text-decoration 已经得到很好地支持，但目前对包含 text-decoration-thickness 的支持仅限于 Firefox。