如何計算字體大小？

Question

我在網站上使用HTML標簽。

我有一個固定高度為150px HTML <table> 。 表內容使用JavaScript動態填充。
我想為表文本內容設置動態 font-size ，如下所示。

我也有字符總數

的HTML

<table style="height:150px;width:350px;">
   <tr>
      <td>
         bla....bla...bla...   /* I want to set this font size dynamic*/
      <td>
   </tr>
   <tr>
      <td>
         bla....bla...bla...   /* I want to set this font size dynamic*/
      <td>
   </tr>
</table>

但是問題是，我不知道應該使用的公式 。 請幫幫我-我具有根據長度計算的字符總數，該公式應適用於設置font-size公式，因此所有字符都應適合表格，而不會出現over lapping和滾動現象。

謝謝

Answer 1

我建議使用jQuery插件“ FitText”。 （ http://fittextjs.com/ ）

$("table tr td").fitText();

它會根據其寬度自動更改div中的字體大小。

jsFiddle： http : //jsfiddle.net/vay0tf33/

Answer 2

您需要計算表內字符的寬度。 您可以使用將內容包裝成一個跨度並計算寬度（以像素為單位）的函數來執行此操作。 然后將該函數的結果除以表格的寬度。 這應該使您行。 用高度（以像素為單位）除以行數應該可以得到最大的字體（以像素為單位）。

function calculateFontSize(width, height, content){
     var area = width*height;
     var contentLength = content.length();

     return  Math.sqrt(area/contentLength); //this provides the font-size in points.

}

重要筆記：

此功能需要純文本輸入。 正如@atmd所說，您只能估算字體大小。 字體大小必須以pt 。

小提琴： http : //jsfiddle.net/b5yebL0k/

Answer 3

這是一個解決方案，雖然效果不佳，但會給您想要的

首先，您需要創建一個具有'visibility:hidden;display:inline; 作為其樣式（css或inline，對於此示例無關緊要）。 元素需要您要測量的文本。

<p id='hidden' style='visibility:hidden;display:inline;'>some thing here</p>

然后在您的腳本中：

var text = document.getElementById('hidden'); // id of hidden element

然后，如果您使用text.offsetWidth獲取元素的寬度。然后可以在javascript中創建一個循環以增加字體大小，直到offSetWidth等於表格寬度。

上面的方法並不是一種很好的處理方法，但是無論字體類型或粗細等如何，它都能為您提供所需的准確信息