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

Range.getClientRects()方法返回一个由range占用的ClientRect列表，当范围在具有文本的正常范围内时，该方法运行良好。如何从浏览器中的字体大小获取行高？

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

但是当span为空时，它不能得到ClientRect。（像在第二个跨度）

我试过以下，但结果并不令人满意。

设定量程的显示属性inline-block
插入'\ufeff'到跨度。在这种情况下，我可以得到ClientRect，但这会弄乱代码的其他部分。

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

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

来源

2014-02-27 ntalbs

什么其他部分的代码，搞的一团糟？您能在获得价值后立即撤消您的更改吗？ – colllin

您无法从字体大小计算行高 - 它依赖于浏览器和与字体系列相关。对不起，超级无益的“答案”:) – colllin

我期望从字体大小计算线高度的公式。现在我明白它取决于浏览器和字体家族，这意味着它不能从一个简单的公式计算出来。感谢您的评论和兴趣。 – ntalbs

只要把任何字符到这个<span>。在这种情况下，我把一个U+FEFF字符。
```
var elem = $('span')[0]; 
elem.textContent = '\ufeff'; 
```
获取一个矩形。
```
var rect = elem.getClientRect(); 
... 
```
将<span>恢复为空。
```
elem.textContent = ''; 
```

来源

2014-02-27 07:45:11

完美地工作。这正是我想要的。 – ntalbs

呃。正是我所评论的。 – colllin

对不起。我没有注意到你的评论。 – ntalbs

您可以遍历跨度上方的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);

来源

2014-02-27 06:56:01 colllin

获得父元素高度的想法很好。但是，这并不能完全解决问题。考虑到div包含两个分别具有不同字体大小的跨度。 - – ntalbs

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

回答

相关问题