如何计算字体大小？

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等于表格宽度。

上面的方法并不是一种很好的处理方法，但是无论字体类型或粗细等如何，它都能为您提供所需的准确信息