根据元素高度和宽度的百分比变化增加或减少字体大小

Question

我想在调整元素大小时调整元素中文本的字体大小。 我设法让它用这个jsFiddle中的宽度调整字体大小：

http://jsfiddle.net/jWKWS/3/

但是，我只能根据一个维度调整大小。 我可以使用高度百分比，也可以使用宽度百分比。 是否可以通过单个方程考虑这两个尺寸，以便尺寸适当调整高度和宽度？

Answer 1

把它放在地区以外的地方怎么样？ 加：

percentageAreaDifference = (1-percentageWidthDifference)*(1-percentageHeightDifference)

接着

newFontSize = startingFontSize * percentageAreaDifference;

虽然你可能想玩它; 我怀疑缩小/增长字体的速度会比需要的快一点。 你可能想要这样做：

newFontSize = startingFontSize * Math.sqrt(percentageAreaDifference);

由于改变字体大小实际上会沿着两个维度缩小它，因此字体大小减少50％会使字符占用的区域减少75％（大致）。

Answer 2

我想你只需要将newfontsize计算更改为：

newFontSize = startingFontSize + (startingFontSize * (percentageWidthDifference + percentageHeightDifference ));

如果宽度减少很多，高度增加一点，净减少。 反之亦然。 但是，假设您希望保留包含在框中的文本，并且回流会在那里咬你。 不确定如何确保它包含在内

Answer 3

我把更多的时间放在这里，而不是我愿意承认，但是我和朋友终于想出了用元素缩放文本的最佳方法。 你必须使用毕达哥拉斯定理计算二维对角线，并得到与对角线的百分比差异。

var diagonal = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));

只需为原始尺寸计算一次，再为新尺寸计算，然后获得百分比差异。

var percentage = (newDiagonal - oldDiagonal) / newDiagonal;

然后只需将字体大小增加相同的百分比即可。

var newFontSize = oldFontSize + (oldFontSize * percentage);

---

另一种选择是跳过所有糟糕的数学并使用我们写的这个插件：

jquery.dynamiText

Answer 4

我想你可能想要该区域的sqrt（作为原始区域的倍数）。 演示这个jsfiddle 。

关键行是（在var语句中）：

        newArea = newWidth*newHeight,
        origArea = startingWidth*startingHeight,
        areaDiff = (newArea/origArea),
        newFontSize = (startingFontSize * Math.sqrt(areaDiff));

使用sqrt是因为字符占用的区域与字体大小的平方大致成比例。 所以N个字符所需的总面积是〜[（f1 / f0）^ 2] N. 因此，区域“因子”的平方根给出了要使用的新字体大小因子的度量。

一个有效的例子; 如果新宽度是旧宽度的1.2倍，而新高度是旧高度的1.5倍，则新区域是旧区域的1.8倍。 然后，该公式表示新字体大小应为旧字体大小的1.34倍。 它似乎工作。