[英]Javascript convert width and height to font-size
我不確定這個問題是否已經被問及答案,但我沒有找到任何相關結果。
我想知道是否可以計算特定尺寸(寬度/高度)並將其轉換為字體大小?
例如,我有:
var textWidth = 150;
var textHeight = 30;
我想從這些尺寸(像素)獲得字體大小?
編輯:謝謝破壞,我終於設法在你的幫助下解決了這個問題。 我使用了這里發布的功能,之后,它並不是很復雜:
$(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 );
}
});
});
再次感謝。
我為你所理解的問題制作了一個小界面:輸入一些文本的最大寬度和最大高度,它會自動計算字體的大小以適應文本: 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()});
注意:小提琴中的超時僅用於顯示動畫的縮小過程。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.