使用javascript计算给定高度的字体宽度

Question

我正在寻找开发用于给定高度的宽度计算的工具。 它将接受字体系列和字体大小/高度，并且应返回输入文本的总宽度。 我正在与https://inkscape.org/en/工具进行比较，但是宽度似乎并不相同。 我在下面列出了8英寸高/字体大小的结果，输入的字词是“自定义”：-1英寸= 96像素

在我的这些字体系列工具中：

Bhatoshine--21.46“ W

麦地那Clean--20.14“ W

布鲁克林之光--28.38“ W

COLLEGE--24.61“ W

在Inkscape桌面工具中：

Bhatoshine--21.278“ W

麦地那Clean--17.015“ W

布鲁克林之光--38.237“ W

College--34.857“ W

我已根据此示例https://www.w3schools.com/tags/canvas_measuretext.asp创建了此工具

我无法弄清楚他们用来计算这一点的机制。 或这种差异是由于桌面和网页中字体的行为所致。

任何帮助将不胜感激。

谢谢

Answer 1

请看下面是否有帮助。 我正在使用PHP函数尝试此操作：-

function CalculateWidth($text, $InchHeight, $font)
    {

     $height_px = $InchHeight*96;
     $height_px_min = $height_px - 10;
     $height_px_max = $height_px + 10;  
     $OutputArray = array();

     for($i=0;$i<10000;$i++){
        $box = imagettfbbox($i, 0, $font, $text);
      $width = abs($box[2] - $box[0]);
      $height = abs($box[7] - $box[1]);
      if($height > $height_px_min && $height <= $height_px_max){
        $OutputArray[]= number_format($width/96, 2);
      }

 }
 // REMOVE EMPTY VALUES
  $OutputArray = array_filter($OutputArray);

 //CALCULATE AVG OF ALL VALUES
 return $average = number_format(array_sum($OutputArray)/count($OutputArray),2);
}

您可以传递高度，字体文件的路径和文本以计算近似宽度。

谢谢。