1

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

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

但是，我只能根据一维调整它的大小。我可以使用高度百分比，也可以使用宽度百分比。是否可以通过一个方程式将两个尺寸都考虑在内，以便尺寸针对高度和宽度进行适当调整？

4

4 回答 4

2

以区域为基础如何？添加：

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

接着

newFontSize = startingFontSize * percentageAreaDifference;

尽管您可能想玩它；我怀疑这会比需要的更快地缩小/增长字体。你可能想这样做：

newFontSize = startingFontSize * Math.sqrt(percentageAreaDifference);

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

于 2012-09-06T16:42:27.173 回答
1

我投入的时间比我愿意承认的要多得多，但我和一个朋友终于找到了用元素缩放文本的最佳方法。您必须使用勾股定理计算二维对角线并获得对角线的百分比差异。

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

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

var percentage = (newDiagonal - oldDiagonal) / newDiagonal;

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

var newFontSize = oldFontSize + (oldFontSize * percentage);

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

jquery.dynamiText

于 2013-02-05T17:40:44.270 回答
1

我认为您只需要将 newfontsize 计算更改为：

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

如果宽度减少很多，高度增加一点，净减少。反之亦然。但是，您可能希望将文本保留在框中，并且回流会咬住您。不知道你会如何确定地控制它

于 2012-09-06T16:48:26.700 回答
0

我认为您可能想要该区域的 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 倍。它似乎有效。

于 2012-10-01T11:45:28.963 回答