如何获得某种字体的基线高度？

Question

我希望能够使用javascript在div中找到一段文本的基线高度.

我不能使用预定义的字体,因为我的许多用户将在浏览器中使用更大的字体设置.

我怎么能用javascript做到这一点？

Answer 1

我为此制作了一个小小的jQuery插件.原理很简单:

在容器中,插入2个具有相同内容的内联元素,但其中一个样式非常小.而另一个非常大A.然后,由于vertical-align:baseline默认情况下,基线如下:

       ^ +----+ ^
       | | +-+| | top
height | |.|A|| v
       | | +-+| 
       v +----+

=======================
baseline = top / height
=======================

这是coffeescript中的插件(这里是JS):

$ = @jQuery ? require 'jQuery'

detectBaseline = (el = 'body') ->
  $container = $('<div style="visibility:hidden;"/>')
  $smallA    = $('<span style="font-size:0;">A</span>')
  $bigA      = $('<span style="font-size:999px;">A</span>')

  $container
    .append($smallA).append($bigA)
    .appendTo(el);
  setTimeout (-> $container.remove()), 10

  $smallA.position().top / $bigA.height()

$.fn.baseline = ->
  detectBaseline(@get(0))

然后,吸烟:

$('body').baseline()
// or whatever selector:
$('#foo').baseline()

-

试试看:http://bl.ocks.org/3157389

Answer 2

继Alan Stearns(http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/)发现内联块元素改变了基线对齐后其他内联元素,我整理了一个演示,我发现它比/sf/answers/813080761/更准确,实际上更简单的JavaScript派生价值:http://codepen.io/georgecrawford/ pen/gbaJWJ.希望它有用.

<div>
  <span class="letter">T</span>
  <span class="strut"></span>
<div>

div {
  width: 100px;
  height: 100px;
  border: thin black solid;
}
.letter {
  font-size: 100px;
  line-height: 0px;
  background-color: #9BBCE3;
}
.strut {
  display: inline-block;
  height: 100px;
}