字體大小自動調整爲適合

Question

我試圖做什麼標題說。我已經看到font-size可以是一個百分比。所以我的猜測是font-size: 100%;會做到這一點，但沒有。

下面是一個例子：http://jsfiddle.net/xVB3t/

我能得到一些幫助嗎？

（如果是necesary與JS做編程是沒有問題的）

Answer 1

這個問題可能會幫助你，但我警告你，雖然這解決它通過jQuery的：

Auto-size dynamic text to fill fixed size container

好運。

這個問題的OP做了一個插件，here is the link to it（& download）

BTW我建議jQuery的，因爲作爲Gaby pointed out這不能CSS雖然只完成，你說你願意用js。 ..

Answer 2

不能用CSS來實現。

100％與父元素的計算font-size有關。

參考：http://www.w3.org/TR/CSS2/fonts.html#font-size-props

對於一個jQuery的解決方案看Auto-size dynamic text to fill fixed size container

Answer 3

在這裏我有一個mootools的解決方案：

Element.implement("fitText", function() { 
       var e = this.getParent(); 
       var maxWidth = e.getSize().x; 
       var maxHeight = e.getSize().y; 
       console.log(maxWidth); 
       var sizeX = this.getSize().x; 
       var sizeY = this.getSize().y; 
       if (sizeY <= maxHeight && sizeX <= maxWidth) 
        return; 

       var fontSize = this.getStyle("font-size").toInt(); 
       while((sizeX > maxWidth || sizeY > maxHeight) && fontSize > 4) { 
        fontSize -= .5; 
        this.setStyle("font-size", fontSize + "px"); 
        sizeX = this.getSize().x; 
        sizeY = this.getSize().y; 
       } 
       return this; 
      }); 

      $$("span").fitText(); 

Answer 4

有點晚了，但我這是怎麼解決這個問題：

document.body.setScaledFont = function() { 
    var f = 0.35, s = this.offsetWidth, fs = s * f; 
    this.style.fontSize = fs + '%'; 
    return this 
} 
document.body.setScaledFont(); 

現在設置了基本文檔字體。

對於dom中其他元素將字體大小設置爲％或em，它們將按比例縮放。

Answer 5

我正在研究這個工作，我喜歡tnt-rox的答案，但我忍不住注意到它有一些額外的開銷可以切斷。

document.body.setScaledFont = function(){ 
    this.style.fontSize = (this.offsetWidth*0.35)+'%'; 
    return this; 
} 
document.body.setScaledFont(); 

切割出的開銷使得它運行有點快，如果你把它添加到一個在onResize事件。

如果你只希望有設置爲調整大小以適應特定的元素裏面的字體，你也可以做類似下面

window.onload = function(){ 
    var scaledFont = function(el){ 
      if(el.style !== undefined){ 
       el.style.fontSize = (el.offsetWidth*0.35)+'%'; 
      } 
      return el; 
     } 
     navs = document.querySelectorAll('.container>nav'), 
     i; 
    window.onresize = function(){ 
     for(i in navs){ 
      scaledFont(navs[i]); 
     } 
    }; 
    window.onresize(); 
}; 

---

我只注意到尼古拉斯的回答也有一些額外的開銷。我已經清理了一下。從性能角度來看，我並不是一個真正的使用一個while循環的粉絲，並慢慢向下移動，直到找到一個合適的尺寸。

function setPageHeaderFontSize(selector) { 
    var $ = jQuery; 
    $(selector).each(function(i, el) { 
     var text = $(el).text(); 
     if(text.length) { 
      var span = $("<span>").css({ 
        visibility: 'hidden', 
        width: '100%', 
        position: 'absolute', 
        'line-height': '300px', 
        top: 0, 
        left: 0, 
        overflow: 'visible', 
        display: 'table-cell' 
       }).text(text), 
       height = 301, 
       fontSize = 200; 
      $(el).append(span); 
      while(height > 300 && fontSize > 10) { 
       height = span.css("font-size", fontSize).height(); 
       fontSize--; 
      } 
      span.remove(); 
      $(el).css("font-size", fontSize+"px"); 
     } 
    }); 
} 
setPageHeaderFontSize("#MyDiv"); 

這裏是我以前的代碼使用jQuery的一個例子。

$(function(){ 
    var scaledFont = function(el){ 
      if(el.style !== undefined){ 
       el.style.fontSize = (el.offsetWidth*0.35)+'%'; 
      } 
      return el; 
     }; 
    $(window).resize(function(){ 
     $('.container>nav').each(scaledFont); 
    }).resize(); 
}); 

Answer 6

這裏是另一個jQuery的解決方案...

/** 
* Resizes page header font-size for the text to fit. 
* basically we add a hidden span into the header, 
* put the text into it and then keep reducing the super large font-size 
* for as long as the height of the span exceeds the super 
* tall line-height set for the test (indicating there is more than one line needed 
* to show the text). 
*/ 
function setPageHeaderFontSize(selectorString) { 
    jQuery(selectorString).each(
     function(i, el) { 
      var text = jQuery(el).text(); 
      var length = text.length; 
      if(length) { 
       var id = "TestToSeeLengthOfElement_" + i; 
       jQuery(el).append("<span style='visibility: hidden; width: 100%; position: absolute; line-height: 300px; top: 0; left: 0; overflow: visible; display: table-cell;' id='"+id+"'>"+text+"</span>"); 
       var innerEl = jQuery("#"+id); 
       var height = 301; 
       var fontSize = 200; 
       while(height > 300 && fontSize > 10) { 
        height = jQuery(innerEl).css("font-size", fontSize).height(); 
        fontSize--; 
       } 
       jQuery(innerEl).remove(); 
       jQuery(el).css("font-size", fontSize+"px"); 
      } 
     } 
    ); 
} 

//you can run it like this... using any jQuery enabled selector string (e.g. h1.pageHeaders works fine). 
setPageHeaderFontSize("#MyDiv");