如何计算字体大小

How to calculate font-size?

本文关键字：字体 计算 何计算      更新时间：2023-09-26

我正在为我的网站使用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也没有滚动。

谢谢

我推荐jQuery插件"FitText"。（http://fittextjs.com/）

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

它会根据宽度自动更改div 中的字体大小。

js小提琴：http://jsfiddle.net/vay0tf33/

这是一个解决方案，它不是很好，但会给你你想要的你想要的

首先，您需要创建一个以'visibility:hidden;display:inline;为样式的元素（css 或内联，对于此示例无关紧要）。该元素需要要测量的文本。

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

以上不是一个很好的做事方式，但它会给你你想要的东西，无论字体类型或粗细等

您需要计算表格内字符的宽度。您可以使用将内容包装到跨度中并以像素为单位计算宽度的函数来执行此操作。然后将该函数的结果除以表的宽度。这应该会让你得到行。将高度（以像素为单位）除以行数应该会得到最大字体大小（以像素为单位）。

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/

相关文章：