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

Question

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

说，html看起来像：

 <span style="font-size:12px">Test 100<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或{{{{}更近。 1}}在V旁边。交错使用相同数量的字符比将它们放在相同字符旁边占用的空间更少：

AVAVAVAVAVAVAVAVAVAVAVAVAVAVAV
AAAAAAAAAAAAAAAVVVVVVVVVVVVVVV

Answer 2

不是每次都创建一个跨度，而是尝试更改跨度的innerHTML并获取其宽度。这会更快，并且不会触发大量验证。

试一试，它表现得更快吗？