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

【问题标题】：how to calculate width and height of each character in a span如何计算跨度中每个字符的宽度和高度
【发布时间】：2012-11-04 16:20:34
【问题描述】：

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

说，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();

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

【问题讨论】：

【解决方案1】：

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

例如，彼此相邻的字符 A 和 V 被紧缩在一起，以便它们比A 与A 相邻或V 与V 相邻更紧密。交错放置相同数量的字符比将它们放在相同字符旁边占用的空间更少：

AVAVAVAVAVAVAVAVAVAVAVAVAVAVAV
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊

【讨论】：

【解决方案2】：

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

试一试，它的运行速度更快吗？

【讨论】：