javascript - 如何获取某种字体的基线高度？

Question

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

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

我如何在 javascript 中执行此操作？

Answer 1

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

在一个容器中，插入 2 个内容相同但一个样式非常小的 . 和另一个非常大的 A 的内联元素。那么，由于默认有vertical-align:baseline，所以给定基线如下:

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

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

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

$ = @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