包装字符“Y”在span中，将边距增加到下一个字符

本文介绍了包装字符“Y”在span中，将边距增加到下一个字符的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

不幸的是，似乎包装了一些的字符（我发现它是真实的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; }

developer.mozilla/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; }

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