包装字符“Y”在span中，将边距增加到下一个字符 [英] Wrapping character "Y" in span, increases the margin to next character

问题描述

在我当前的项目中，我需要包裹一个句子中的每个单个字符，因此我可以测量从句子开始直到有问题的字符的距离。

不幸的是，似乎包装了一些的字符（我发现它是真实的Y和T span，在右边添加一个额外的边距，因此整个文本被拉伸：

  div {font-size：100px; }  

 < h2> ; / h2>< div> AAA-A< / div>< div> < span> A< / span>< span>  - < / span>< span> A< / span>< span>  - < / span>< span> A< / span> ;  - < / span>< span> A< / span>< / div>< h2>意外（不同宽度）：< / h2>< div> YYY-Y< / div>< div ; < span> Y< / span>< span>  - < / span>< span> Y< / span>< span>  - < / span>< span> Y< / span>< ;  - < / span>< span> Y< / span>< / div>  

如果你运行这个代码片段，你会意识到，当包装在SPAN中时，YYYY明显更宽。

为什么？

你可以通过设置 font-kerning：none;解决方案来解决这个问题。 到 div

像这样

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

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

In my current project, I need to wrap every single character of a sentence within a span, so I can measure the distance from the beginning of the sentence up until the character in question.

Unfortunately, it seems that wrapping some of the characters (I found it to be true for "Y" and "T") in a span, adds an extra margin to the right, so the whole text gets stretched:

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>

If you run the snippet, you will realize, that "Y-Y-Y-Y" is significantly wider when wrapped in SPANs.

Why is that so? How can I prevent this behaviour?

解决方案

You can solve that with setting font-kerning:none; to the div

Like this

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

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

这篇关于包装字符“Y”在span中，将边距增加到下一个字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！