Wie misst man die Schriftmetrik in Javascript? Gibt es eine API für Textmetriken wie GetCellDescent in C#?

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

Ich habe diesen folgenden Code verwendet. Es funktioniert gut, um die Werte für die Textbreite und -höhe genau zu erhalten. Aber ich brauche die Werte für den Textanstieg und -abstieg, die genau im Float-Wert sind. Bitte helfen Sie mir und Danke im Voraus.

Answer 1

Es ist nicht "unmöglich", es ist einfach nicht in die verfügbare API des Browsers eingebaut. JavaScript kann Schriftartendateien analysieren und die Metrikdaten wie jede andere Anwendung lesen.

Zwei Bibliotheken, die ich kenne ...

Opentype

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

Font.js

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