jak ustawić rozmiar czcionki na podstawie rozmiaru kontenera?

Jeśli chcesz ustawić rozmiar czcionki jako procent szerokości widoku, użyj jednostki vw:

#mydiv { font-size: 5vw; }

Inną alternatywą jest użycie SVG osadzonego w HTML. To będzie tylko kilka linijek. Atrybut font-size elementu tekstowego zostanie zinterpretowany jako "jednostki użytkownika", na przykład te, w których widok jest zdefiniowany. Jeśli więc zdefiniujesz viewport jako 0 0 100 100, wtedy rozmiar czcionki 1 będzie jedną setną rozmiaru elementu svg.

I nie, nie ma mowy aby to zrobić w CSS za pomocą obliczeń. Problem polega na tym, że procenty używane dla rozmiaru czcionki, w tym procenty wewnątrz obliczeń, są interpretowane w kategoriach odziedziczonego rozmiaru czcionki, a nie rozmiaru kontenera. CSS mógłby użyć do tego celu jednostki o nazwie bw (box-width), więc można powiedzieć div { font-size: 5bw; }, ale nigdy nie słyszałem takiej propozycji.

Inna alternatywa js:

Przykład Pracy

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 podano w odpowiedzi torazaburo możesz użyć svg. I ułożyła prosty przykład jako dowód koncepcji:

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>

It cannot Be accured with css font-size

Zakładając, że "czynniki zewnętrzne", o których mówisz, mogą zostać odebrane przez zapytania medialne, możesz ich użyć - korekty prawdopodobnie będą musiały być ograniczone do zestawu predefiniowanych rozmiarów.

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

FitText uelastycznia rozmiary czcionek. Użyj tej wtyczki w układzie płynnym lub responsywnym, aby uzyskać skalowalne nagłówki, które wypełniają Szerokość elementu nadrzędnego.

Oto Funkcja:

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

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

Następnie dodaj coś takiego do 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 problemy, których przykład @apaul34208 nie rozwiązał. W moim przypadku;

• mam kontener, który zmieniał rozmiar w zależności od viewportu za pomocą zapytań o media
• tekst wewnątrz jest generowany dynamicznie
• chcę skalować zarówno w górę, jak i w dół

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/

Podałem bardziej szczegółową odpowiedź na temat używania vw w odniesieniu do konkretnego rozmiaru konteneraw tej odpowiedzi, więc nie będę powtarzał mojej odpowiedzi tutaj.

Podsumowując, jest to zasadniczo kwestia faktoringu (lub kontrolowania), jaki będzie Rozmiar kontenera w odniesieniu do viewportu, a następnie wypracowania odpowiedniego rozmiaru vw w oparciu o to dla kontenera, biorąc pod uwagę, co musi się stać, jeśli coś jest dynamicznie zmieniane.

Więc jeśli chcesz mieć rozmiar 5vw w kontenerze na 100% szerokości okna widokowego, a następnie jeden na 75% szerokości okna widokowego, który prawdopodobnie chcesz mieć (5vw * .75) = 3.75vw.

Jeśli chcesz skalować go w zależności od szerokości elementu, możesz użyć tego komponentu web:
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 również spróbować tej czystej metody CSS:

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