html – 在span中包装字符“Y”,增加下一个字符的边距

发布时间：2020-12-14 16:35:56 所属栏目：资源来源：网络整理

导读：在我目前的项目中,我需要在一个范围内包装一个句子的每个单个字符,这样我就可以测量从句子开头到相关字符的距离. 不幸的是,似乎在一个跨度中包含一些字符(我发现它对于“Y”和“T”是真的),在右边添加了一个额外的边距,因此整个文本被拉伸： div { font-size

在我目前的项目中,我需要在一个范围内包装一个句子的每个单个字符,这样我就可以测量从句子开头到相关字符的距离.

不幸的是,似乎在一个跨度中包含一些字符(我发现它对于“Y”和“T”是真的),在右边添加了一个额外的边距,因此整个文本被拉伸：

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>

如果你运行代码片段,你会发现,当包装在SPAN中时,“Y-Y-Y-Y”明显更宽.

为什么会这样？我该如何防止这种行为？

解决方法

您可以通过设置font-kerning来解决这个问题：无;到了div

Like this

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!