jak ustawić rozmiar czcionki na podstawie rozmiaru kontenera?

Mam pojemnik, który ma% szerokości i wysokości, więc skaluje się w zależności od czynników zewnętrznych. Chciałbym, aby czcionka wewnątrz kontenera miała stały rozmiar w stosunku do rozmiaru kontenerów. Czy jest na to dobry sposób za pomocą CSS? font-size: x%By przeskalować czcionki tylko w zależności od pierwotnego rozmiaru czcionki (która jest 100%).

Możesz to zrobić za pomocą CSS3 przy użyciu obliczeń, jednak najprawdopodobniej bezpieczniej byłoby użyć JavaScript.

Oto przykład: http://jsfiddle.net/8TrTU/

Za pomocą JS możesz zmienić wysokość tekstu, a następnie po prostu powiązać to samo obliczenie ze zdarzeniem zmiany rozmiaru, podczas zmiany rozmiaru, aby skalowało się, gdy użytkownik wprowadza poprawki, lub jakkolwiek zezwalasz na zmianę rozmiaru elementów.

Jeśli chcesz ustawić rozmiar czcionki jako procent szerokości rzutni, użyj vwjednostki:

#mydiv { font-size: 5vw; }

Inną alternatywą jest użycie SVG osadzonego w kodzie HTML. To będzie tylko kilka linijek. Atrybut rozmiaru czcionki elementu tekstowego zostanie zinterpretowany jako „jednostki użytkownika”, na przykład te, dla których jest zdefiniowany obszar wyświetlania. Jeśli więc zdefiniujesz rzutnię jako 0 0 100 100, wówczas rozmiar czcionki 1 będzie równy jednej setnej rozmiaru elementu svg.

I nie, nie ma sposobu, aby to zrobić w CSS za pomocą obliczeń. Problem polega na tym, że wartości procentowe używane do określania rozmiaru czcionki, w tym wartości procentowe w obliczeniach, są interpretowane w kategoriach odziedziczonego rozmiaru czcionki, a nie rozmiaru kontenera. W tym celu CSS mógłby użyć jednostki o nazwie bw(szerokość pola), więc można powiedzieć div { font-size: 5bw; }, ale nigdy nie słyszałem takiej propozycji.

Kolejna alternatywa js:

Przykład roboczy

fontsize = function () {
    var fontSize = $("#container").width() * 0.10; // 10% of container width
    $("#container h1").css('font-size', fontSize);
};
$(window).resize(fontsize);
$(document).ready(fontsize);

Lub, jak stwierdzono w odpowiedzi Torazaburo, możesz użyć svg. Jako dowód słuszności podałem prosty przykład:

Przykład SVG

<div id="container">
    <svg width="100%" height="100%" viewBox="0 0 13 15">
        <text x="0" y="13">X</text>
    </svg>
</div>

Użyłem Fittext w niektórych moich projektach i wygląda na to, że jest to dobre rozwiązanie takiego problemu.

FitText sprawia, że ​​rozmiary czcionek są elastyczne. Użyj tej wtyczki w elastycznym lub elastycznym układzie, aby uzyskać skalowalne nagłówki, które wypełniają szerokość elementu nadrzędnego.

Nie można tego osiągnąć za pomocą rozmiaru czcionki CSS

Zakładając, że „czynniki zewnętrzne”, do których się odnosisz, mogą zostać odebrane przez zapytania o media, możesz ich użyć - korekty prawdopodobnie będą musiały ograniczać się do zestawu wstępnie zdefiniowanych rozmiarów.

Oto funkcja:

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

Następnie przekonwertuj rozmiary czcionek elementów potomnych wszystkich dokumentów na em lub%.

Następnie dodaj coś takiego do swojego kodu, aby ustawić podstawowy rozmiar czcionki.

document.body.setScaledFont(0.35);
window.onresize = function() {
    document.body.setScaledFont(0.35);
}

http://jsfiddle.net/0tpvccjt/

Miałem podobny problem, ale musiałem wziąć pod uwagę inne kwestie, których przykład @ apaul34208 nie rozwiązał. W moim przypadku;

• Mam kontener, który zmieniał rozmiar w zależności od widocznego obszaru przy użyciu zapytań o media
• Tekst wewnątrz jest generowany dynamicznie
• Chcę zwiększać i zmniejszać skalę

Nie jest to najbardziej elegancki przykład, ale dla mnie działa. Rozważ użycie ograniczania zmiany rozmiaru okna ( https://lodash.com/ )

var TextFit = function(){
	var container = $('.container');
  container.each(function(){
    var container_width = $(this).width(),
     	width_offset = parseInt($(this).data('width-offset')),
        font_container = $(this).find('.font-container');
	
     if ( width_offset > 0 ) {
         container_width -= width_offset;
     }
                
    font_container.each(function(){
      var font_container_width = $(this).width(),
          font_size = parseFloat( $(this).css('font-size') );

      var diff = Math.max(container_width, font_container_width) - Math.min(container_width, font_container_width);
 
      var diff_percentage = Math.round( ( diff / Math.max(container_width, font_container_width) ) * 100 );
      
      if (diff_percentage !== 0){
          if ( container_width > font_container_width ) {
            new_font_size = font_size + Math.round( ( font_size / 100 ) * diff_percentage );
          } else if ( container_width < font_container_width ) {
            new_font_size = font_size - Math.round( ( font_size / 100 ) * diff_percentage );
          }
      }
      $(this).css('font-size', new_font_size + 'px');
    });
  });
}

$(function(){
  TextFit();
  $(window).resize(function(){
  	TextFit();
  });
});

.container {
		width:341px;
		height:341px;
		background-color:#000;
		padding:20px;
	}
	.font-container {
		font-size:131px;
		text-align:center;
		color:#fff;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container" data-width-offset="10">
	<span class="font-container">£5000</span>
</div>

https://jsfiddle.net/Merch80/b8hoctfb/7/

W tej odpowiedzivw podałem bardziej szczegółową odpowiedź dotyczącą używania w odniesieniu do określonego rozmiaru pojemnika , więc nie będę tutaj powtarzać odpowiedzi.

Podsumowując, jest to jednak zasadniczo kwestia uwzględnienia (lub kontrolowania) tego, jaki będzie rozmiar pojemnika w odniesieniu do widocznego obszaru, a następnie ustalenia odpowiedniego vwrozmiaru na podstawie tego dla kontenera, biorąc pod uwagę, co musi się stać jeśli coś jest dynamicznie zmieniane.

Więc jeśli chcesz mieć 5vwrozmiar w kontenerze na 100% szerokości 75%widocznego obszaru, to prawdopodobnie chcesz mieć taki rozmiar (5vw * .75) = 3.75vw.

Jeśli chcesz skalować go w zależności od szerokości elementu, możesz użyć tego komponentu internetowego:
https://github.com/pomber/full-width-text

Sprawdź demo tutaj:
https://pomber.github.io/full-width-text/

Użycie jest takie:

<full-width-text>Lorem Ipsum</full-width-text>

Możesz także wypróbować tę czystą metodę CSS:

font-size: calc(100% - 0.3em);