javascript - 如何测量javascript中的字体指标？是否有任何 API 可用于 C# 中的 GetCellDescent 等文本指标？

Question

function calculateSpanHeight(testLine,font){
          var spanElement = $(document.createElement("span")).css("white-space","pre");
          spanElement[0].id = "tempSpan";
          var spanElement = $(spanElement).html(testLine);
          $(spanElement).appendTo("body");
          $(spanElement).css("font",context.font);
          var testWidth = $("#tempSpan").width();
          var height = $("#tempSpan").height();

          var block = $('<div style="display: inline-block; width: 1px; height: 0px;"></div>');

          var div = $('<div></div>');
          div.append(spanElement, block);

          var body = $('body');
          body.append(div);

          var result = {};

          block.css({ verticalAlign: 'baseline' });
          result.ascent = block.offset().top - spanElement.offset().top;

          block.css({ verticalAlign: 'bottom' });
          result.height = block.offset().top - spanElement.offset().top;

          result.descent = result.height - result.ascent;
          $(div).remove();
          return {"testWidth" : testWidth, "height" : height, "spanElement" : spanElement, "ascent" : result.ascent, "descent" : result.descent};
      }

我使用了以下代码。它可以很好地准确获取文本宽度和高度值。但我需要的文本上升和下降值正是浮点值。请帮助我并提前致谢。

Answer 1

这不是“不可能”，只是没有内置到浏览器可用的 API 中。 JavaScript 可以像任何其他应用程序一样解析字体文件并读取指标数据。

我知道的两个库...

OpenType

截图来自 http://opentype.js.org/font-inspector.html :

字体.js

截图来自 http://bl.ocks.org/eweitnauer/7324712 :