在我当前的项目中,我需要包裹一个句子中的每个单个字符,因此我可以测量从句子开始直到有问题的字符的距离。
不幸的是,似乎包装了一些的字符(我发现它是真实的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
更多推荐
包装字符“Y”在span中,将边距增加到下一个字符
发布评论