文本装饰下划线 - 忽略下行部分而不是单行和渐变背景并且在 Chrome 中看起来不错

Question

我正在寻找一种方法来强调具有多行、渐变背景的标题[编辑 - 背景图像不是纯色，而是渐变]，忽略下行（所以 border-bottom 不是解决方案）并且它在 Chrome 中看起来不错（简单的 text-decoration: underline 在 Chrome 中非常粗）。

我已经检查了这里提到的所有解决方案：https://css-tricks.com/styling-underlines-web/ 但没有解决我的问题（除了“完全避免使用下划线”:)）。

据我所知，Chrom 仍然不支持 text-decoration-thickness

Answer 1

忽略下部的要求意味着人们或多或少被迫使用 CSS 文本修饰，因为还有谁知道下部在哪里？另一种方法可能是用不同的格式围绕每个字符，这不太实用。

据了解，Chrome 将支持 text-decoration-thickness 但仅在某些条件下。来自 https://caniuse.com/?search=text-decoration-thickness:

The text-decoration-thickness property does not work unless either text-underline-offset is set to something other than auto or text-decoration-color is set to something other than currentColor. See Chromium bug 1154537

因此可以控制下划线粗细。尝试让 Chrome 和 Firefox 实现从偏移量的角度来看完全一样是有问题的（FF 似乎默认将下划线放置在比 Chrome 更靠后的位置）并且这两个浏览器不会以完全相同的方式对待后裔。希望设置厚度和调整偏移量会产生可接受的航向。

举个例子

div {
  font-family: Arial, Helvetica, sans-serif;
  font-weight; 400;
  font-size: 3em;
  width: 300px;
  text-align: center;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: black;
  text-underline-offset: 0.1em;
}

<div>To jest kryzys ekologiczny i klimatyczny</div>

文本装饰下划线 - 忽略下行部分而不是单行和渐变背景并且在 Chrome 中看起来不错

Text decoration underline - ignore descenders not single line and gradient background and looks good in Chrome

css

google-chrome

text-decorations