使用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);
}

您可以傳遞高度，字體文件的路徑和文本以計算近似寬度。

謝謝。