在我目前的项目中,我需要在一个范围内包装一个句子的每个单个字符,这样我就可以测量从句子开头到相关字符的距离.
不幸的是,似乎在一个跨度中包含一些字符(我发现它对于“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
div { font-size: 100px; font-kerning: none; }
https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning
