字体大小自动调整为适合

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");