html - 在 span 中包装字符 "Y"，增加到下一个字符的边距

Question

在我当前的元素中，我需要将一个句子的每个字符都包裹在一个范围内，这样我就可以测量从句子开头到相关字符的距离。

不幸的是，似乎将 一些 字符(我发现它对“Y”和“T”是正确的)包裹在一个跨度中，在右边增加了额外的边距，所以整个文本被拉伸(stretch):

div { font-size: 100px; }

<h2>Expected (same width):</h2>
<div>A-A-A-A</div>
<div>
  <span>A</span><span>-</span><span>A</span><span>-</span><span>A</span><span>-</span><span>A</span>
</div>

<h2>Unexpected (different width):</h2>
<div>Y-Y-Y-Y</div>
<div>
  <span>Y</span><span>-</span><span>Y</span><span>-</span><span>Y</span><span>-</span><span>Y</span>
</div>

如果您运行该代码段，您会发现，“Y-Y-Y-Y”在包裹在 SPAN 中时要宽得多。

为什么会这样？我怎样才能防止这种行为？

Answer 1

您可以通过将 font-kerning:none; 设置为 div

来解决这个问题

Like this

div { font-size: 100px; font-kerning: none; }

https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning