1

この質問がすでに質問され、回答されているかどうかはわかりませんが、関連する結果は見つかりませんでした。

特定の寸法（幅/高さ）を計算してフォントサイズに変換できるかどうか知りたいですか？

たとえば、私は持っています：

var textWidth = 150;
var textHeight = 30;

そして、これらの寸法（ピクセル）からフォントサイズを取得したいですか？

編集：dystroyに感謝します、私はついにあなたの助けを借りてこの問題を解決することができました。ここに掲載されている関数を使用しましたが、その後はそれほど複雑ではありませんでした。

$(function(){

            $( "#height, #width" ).keyup(function(){

                var varHeight = $( "#height" ).val();
                var varWidth = $( "#width" ).val();

                if(  varHeight != "" && varWidth != "" ){

                    $( "#text_container" ).css( "width", varWidth );    
                    $( "#text_container" ).css( "height", varHeight );

                    $( "#text_container" ).textfill({ maxFontPixels: 500 });

                    var getFontsize = $( "#text_container > span" ).css( "font-size" );
                    var fontSize = parseInt( getFontsize.slice(0, -2) );

                    $( "#fontsize" ).val( fontSize );

                }

            });

        });

再度、感謝します。

4

1 に答える 1

4

私はあなたの質問であると私が理解しているもののために小さなインターフェースを作りました：あなたはいくつかのテキストの最大幅と最大高さを入力し、それはテキストを適応させるためにフォントのサイズを自動的に計算します：http: //jsfiddle.net/kPZ3E/

HTML：

Max width : <input id=width value=200> px
<br>Max height : <input id=height value=20> px
<br><br>
<table border=1><tr><td id=txtcell nowrap><span id=txt style=>Some sample text.</span></td></tr></table>
<br>Font Size : <span id=mes></span>​

JS：

var fontSize = 100;
var reduce = function() {
    $('#txt').css('font-size', fontSize);
    $('#mes').html(fontSize);
    if ($('#txt').width()>$('#width').val() || $('#txt').height()>$('#height').val()) {
       fontSize -= 1;
       reduce();
    }
};
reduce();
$('#width, #height').change(function(){fontSize = 100;reduce()});

注：フィドルのタイムアウトは、アニメーションによる縮小プロセスを示すためにのみここにあります。

于 2012-11-16T12:51:12.953 に答える