如何在javascript中测量字体指标？是否有任何API可用于C＃中的GetCellDescent等文本指标？ [英] how to measure the font metrics in javascript? Is there any API available for text metrics like GetCellDescent in C#?

问题描述

  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}; 
} 
  

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

解决方案

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

我知道的两个库...

OpenType

来自

Font.js

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};
      }

I have used this following code. It is working fine for getting the text width and height values exactly. But i need the text ascent and descent values exactly that is in float value. Please help me and Thanks in advance.

解决方案

It's not "impossible", it's just not built into the browser's available API. JavaScript can parse font files and read the metric data like any other application.

Two libraries that I know of...

OpenType

Screenshot from http://opentype.js.org/font-inspector.html:

Font.js

Screenshot from http://bl.ocks.org/eweitnauer/7324712:

这篇关于如何在javascript中测量字体指标？是否有任何API可用于C＃中的GetCellDescent等文本指标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！