javascript - 将下划线移到下降线下方

Question

当设置 text-decoration:underline在元素上，线条显示在基线上。

它在字母的下降部分。如果该行包含许多带有降序的字母，则会使阅读变得困难。

我想使用 text-underline-offset: 4px; 将下划线移动到下降线下方.

有用。
在 Chrome 上，这正是我想要的。但是，它不在 Safari 的下降器之下。

如果我使用，text-underline-offset: 5px; , 它适用于 Safari。但在 Chrome 上，它接近于第二行的上行者，而不是接近于同一行的下行者。我可以使用更高的值 line-height 来解决它，但我不想要。
有什么办法可以计算下降器的高度，以便我将下划线的高度偏移到基线以下这么多？
信息:
我使用的字体叫做 Basis Grotesque Pro 常规
链接

Ascender

Descender

text-underline-offset

Answer 1

使用来自 https://stackoverflow.com/questions/10180148/how-to-calculate-descender-height-in-javascript#:~:text=This%20is%20possible%3A%20use%20this%20library%3A%20baseline%20ratio%2C,The%200%20px%20font%20lies%20on%20the%20baseline 的想法.
您可以通过将两个跨度彼此相邻来计算下降器的高度。
第一个字体大小为 0px。如果您找到它的顶部位置，那将是这对跨度的基线位置。
第二个跨度具有您感兴趣的任何字体大小。
然后，您可以通过从第一个跨度的顶部获取第二个跨度的顶部来获得上升器的高度。下降器的高度将是第二个跨度的高度减去这个量。

const span1Params = document.querySelector('.span1').getBoundingClientRect();
const span2Params = document.querySelector('.span2').getBoundingClientRect();
document.querySelector('.text').style.textUnderlineOffset = (span2Params.height - (span1Params.top - span2Params.top)) + 'px';

.test {
  position: absolute;
  top: -1000px;
}

.span1 {
  font-size: 0px;
}

.span2 {
  font-size: 36px;
}

.text {
  text-decoration: underline;
  font-size: 36px;
}

<div class="test">
  <span class="span1">j</span>
  <span class="span2">j</span>
</div>
<div class="text">Atmospheric impacts of hydrogen as an energy carrier</div>