1

要素のサイズが変更されたときに、要素内のテキストのフォントサイズを調整したい。このjsFiddleの幅でフォントのサイズをかなりうまく変更することができました。

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

ただし、サイズ変更できるのは1つのディメンションに基づいているだけです。高さのパーセンテージを使用することも、幅のパーセンテージを使用することもできます。サイズが高さと幅の両方に適切に調整されるように、単一の方程式で両方の寸法を考慮に入れることはできますか？

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

newfontsizeの計算を次のように変更する必要があると思います。

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

幅が大幅に減少し、高さが少し増加すると、正味の減少になります。およびその逆。おそらく、ボックスに含まれているテキストを保持したいのですが、リフローがそこに食い込んでしまいます。確実に封じ込める方法がわからない

于 2012-09-06T16:48:26.700 に答える
1

私はこれに認めるよりもはるかに多くの時間を費やしましたが、友人と私は最終的に要素を使用してテキストを拡大縮小するための最良の方法を見つけました。ピタゴラス定理を使用して2次元の対角線を計算し、対角線からのパーセンテージの差を取得する必要があります。

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

元のサイズと新しいサイズを1回計算してから、パーセンテージの差を取得します。

var percentage = (newDiagonal - oldDiagonal) / newDiagonal;

次に、フォントサイズを同じ割合だけ増やします。

var newFontSize = oldFontSize + (oldFontSize * percentage);

他のオプションは、すべてのくだらない数学をスキップして、私たちが書いたこのプラグインを使用することです：

jquery.dynamiText

于 2013-02-05T17:40:44.270 に答える
0

エリアの平方根（元のエリアの倍数として）が必要な場合があると思います。このjsfiddleのデモ。

キーラインは（varステートメント内で）次のとおりです。

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

文字が占める面積はフォントサイズの2乗にほぼ比例するため、sqrtが使用されます。したがって、N文字に必要な合計領域は〜[（f1 / f0）^2]Nです。したがって、面積'factor'の平方根は、使用する新しいフォントサイズ係数の尺度を示します。

実例; 新しい幅が古い幅の1.2倍で、新しい高さが古い高さの1.5倍である場合、新しい領域は古い領域の1.8倍になります。この式は、新しいフォントサイズが古いフォントサイズの1.34倍であることを示しています。そして、それはうまくいくようです。

于 2012-10-01T11:45:28.963 に答える