如何在浏览器中获取字体大小的行高？

Question

Range.getClientRects()方法返回由range占用的ClientRect列表，当范围在具有文本的正常范围内时，这种方法很有效。

<div class="line">
  <span class="run">Hello!</span><span class="run"></span>
</div>

但是当span为空时它无法获得ClientRect 。 （就像在第二个跨度）

我尝试了以下，但结果不尽如人意。

• 将span的display属性设置为inline-block
• 将'\'插入span。 在这种情况下，我可以获得ClientRect但这会搞乱代码的其他部分。

如果我可以从font-size计算行高，那将是最好的。 有没有办法在px中获得空跨度的行高？

注意：我不是想获得line-height css属性。 在这种情况下， line-height将是normal 。

Answer 1

您可以遍历跨度上方的DOM树，以查找具有数字行高定义的最近元素。 在我的测试用例中，这似乎也适用于百分比行高 - 它获得计算的行高而不是百分比。 虽然我不确定跨浏览器的支持。

演示： http ： //jsfiddle.net/colllin/DHLWW/

码：

var lineHeight = -1;
var $span = $('span');
var tree = $span.get().concat( $span.parents().get() );
$(tree).each(function(index, element) {
    if (lineHeight < 0) {
        lineHeight = parseFloat($(element).css('line-height')) || -1;
    }
});
$(document.body).append('<br>line-height of span: '+lineHeight);

Answer 2

1. 只需将任何字符放入此<span> 。 在这种情况下，我放了一个U+FEFF字符。

    var elem = $('span')[0]; elem.textContent = '\'; 

2. 得到一个矩形。

    var rect = elem.getClientRect(); ... 

3. 将<span>恢复为空。

    elem.textContent = '';