How can I get a line height from font size within browser?

Range.getClientRects() method returns a list of ClientRect occupied by range and this works well when the range is within normal span which has text.

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

But it fails to get ClientRect when span is empty. (like in the second span)

I've tried the followings, however, the results were not satisfactory.

• Set span's display property to inline-block
• Insert '\ufeff' into span. In this case, I can get ClientRect but this will mess up the other parts of codes.

If I can compute line height from the font-size, it would be best. Is there any way to get the line height of empty span in px?

NOTE: I'm not trying to get line-height css property. In this case, the line-height would be normal.

1. Just put any character into this <span>. In this case, I put a U+FEFF character.

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

2. Get a rectangle.

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

3. Restore the <span> to be empty.

   elem.textContent = '';