Rozmiar czcionki dostosowany automatycznie do rozmiaru

Question

Próbuję zrobić to, co mówi tytuł. Widziałem, że font-size może być procentem. Zgaduję więc, że zrobi to font-size: 100%;, ale nie.

Oto przykład: http://jsfiddle.net/xVB3t/

mogę trochę pomóc proszę?

(Jeśli jest necesary to zrobić programowo z JS nie ma problemu)

Answer 1

to pytanie może pomóc, ale ostrzegam cię chociaż to rozwiązuje go poprzez jQuery:

Auto-size dynamic text to fill fixed size container

Powodzenia .

PO tej kwestii wykonane wtyczki, here is the link to it (& download)

BTW ja sugeruję jQuery bo jak Gaby pointed out ten nie może być dokonana jedynie chociaż CSS i mówiłeś, że byli gotowi użyć JS. ..

Answer 2

nie można zrobić z CSS.

100% odnosi się do obliczonego font-size elementu nadrzędnego.

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

rozwiązania wygląd jQuery na Auto-size dynamic text to fill fixed size container

Answer 3

tutaj mam rozwiązanie 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

trochę późno, ale to jest jak się podejść do tego problemu:

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

Podstawowa czcionka dokumentu jest teraz ustawiona.

Dla pozostałych elementów w domowym ustawieniu rozmiarów czcionek jako% lub em, będą one skalowane proporcjonalnie.

Answer 5

Szukałem tego w pracy i podobała mi się odpowiedź tnt-roxa, ale nie mogłem nie zauważyć, że ma dodatkowe obciążenie, które można wyciąć.

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

Wycinanie narzut pozwala uruchomić trochę szybciej jeśli dodasz go do onresize imprezy.

Jeśli szukasz tylko mieć czcionkę wewnątrz określonego elementu zestawu do zmiany rozmiaru w celu dopasowania, można również zrobić coś jak na poniższym

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

---

Właśnie odpowiedź zauważył Nicolaas' również miał trochę dodatkowych kosztów. Sprzątałem to trochę. Z perspektywy wydajności nie jestem fanem używania pętli while i powolnego przesuwania w dół, dopóki nie znajdziesz takiego, który pasuje.

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

Oto przykład mojego wcześniejszego kodu przy użyciu 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

Oto kolejny rozwiązanie 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");