Question

我希望在元素调整大小时调整元素中文本的字体大小。我设法通过这个jsFiddle中的宽度很好地调整字体大小：

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

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（作为原始区域的倍数）。在this 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倍。它似乎有效。

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

4 个答案: