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

时间:2018-06-13 18:07:10

标签: javascript html

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

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

Bhatoshine - 21.46" W

Madina Clean - 20.14“W

Brooklyn Light - 28.38“W

学报 - 24.61" W

在Inkscape桌面工具中

Bhatoshine - 21.278" W

Madina Clean - 17.015“W

Brooklyn Light - 38.237“W

学报 - 34.857" W

我已根据此示例https://www.w3schools.com/tags/canvas_measuretext.asp

创建了此工具

我无法弄清楚他们用来计算这个的机制。或者这种差异是因为桌面和网页中的字体行为。

非常感谢任何帮助。

谢谢

1 个答案:

答案 0 :(得分:0)

如果有帮助,请参见下文。我正在使用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);
}

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

谢谢。