javascript - 如何计算跨度中每个字符的宽度和高度

Question

计算跨度中每个字符的宽度和高度的最佳方法是什么。

比如说，html 看起来像:

 <span style="font-size:12px">Test 100<span>

因此，一种方法是使用 span 的样式为每个字符制作一个虚拟 span，并将其附加到 dom 并获取它的高度和宽度。

示例，使用查询:

 var x = $('<span style="font-size:12px">' + 'T' + '</span'>);
 $('body').append(x); 
 var h = x.height(),  w= x.width();
 x.remove();

但这是低效的。还有其他方法吗？

Answer 1

你无法真正获得字符的大小，因为它占用的空间量取决于它旁边的字符。

例如，相邻的字符 A 和 V 是紧邻的，因此它们比相邻的 A 靠得更近A 或 V 旁边的 V。将相同数量的字符交错放置比将它们放在相同字符旁边占用的空间更少:

AVAVAVAVAVAVAVAVAVAVAVAVAVAVAVAV
AAAAAAAAAAAAAAAVVVVVVVVVVVVVVVV