Schriftgröße automatisch anpassen

Question

Ich versuche zu tun, was der Titel sagt. Ich habe gesehen, dass font-size ein Prozentsatz sein kann. Also meine Vermutung war, dass font-size: 100%; würde es tun, aber nein. Hier

ein Beispiel: http://jsfiddle.net/xVB3t/

Kann ich etwas Hilfe bitte?

(Wenn necesary ist es programmatisch dort mit js zu tun, ist kein Problem)

Answer 1

Diese Frage könnte Ihnen helfen, aber ich warne Sie, obwohl diese es durch jQuery löst:

Auto-size dynamic text to fill fixed size container

Viel Glück .

Die OP dieser Frage machten ein Plugin, here is the link to it (& download)

BTW jQuery Ich schlage denn als Gaby pointed out dies nicht nur obwohl CSS getan werden kann, und Sie sagen, Sie sind bereit, js zu verwenden. ..

Answer 2

Kann nicht mit CSS erfolgen.

100% ist in Bezug auf die berechnete font-size des übergeordneten Elements.

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

Für eine jQuery Lösung Blick auf Auto-size dynamic text to fill fixed size container

Answer 3

hier habe ich eine Mootools Lösung:

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

ein bisschen spät, aber das ist, wie ich Ansatz, dieses Problem:

Die Schriftart des Basisdokuments ist jetzt festgelegt.

Für den Rest Ihrer Elemente in der Dom Schriftgrößen wie% oder em und sie werden proportional skalieren.

Answer 5

Ich schaute mir das für die Arbeit an und ich mochte die Antwort von tnt-rox, aber ich konnte nicht anders, als zu bemerken, dass es zusätzlichen Overhead hatte, der ausgeschnitten werden konnte.

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

den Overhead Ausschneiden macht es ein wenig schneller laufen, wenn Sie es zu einem onresize Ereignis hinzuzufügen.

Wenn Sie nur suchen, um die Schriftart in einem bestimmten Element haben, eingestellt zu passen, um die Größe, können Sie auch auch so etwas wie die folgenden

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(); 
}; 

---

Ich habe gerade bemerkt nicolaas' Antwort tun hatte etwas zusätzlicher Overhead. Ich habe es ein bisschen aufgeräumt. Aus Performance-Sicht bin ich nicht wirklich ein Fan davon, eine While-Schleife zu verwenden und langsam die Größe nach unten zu bewegen, bis Sie eine passende gefunden haben.

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

Und hier ist ein Beispiel für meine früheren Code mit 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

Hier ist eine weitere jQuery Lösung ...

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