jak ustawić rozmiar czcionki na podstawie rozmiaru kontenera?

83

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%).

FurtiveFelon
źródło

Odpowiedzi:

29

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.

Matthew Riches
źródło
Spróbuj użyć: window.onresize = function(event) { yourFunctionHere(); };również w ten sposób, jeśli użytkownik zdecyduje się zmienić rozmiar strony po załadowaniu, twoja czcionka zmieni rozmiar odpowiednio
Henry Howeson
150

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.


źródło
1
W jakich przeglądarkach działa VW? Nie mogę zmusić go do działania w przeglądarce Firefox.
lorefnon
1
@lorefnon, ta strona caniuse.com/#feat=viewport-units mówi, że będzie działać w przeglądarce Firefox 19, tymczasem wypróbuj Chrome.
@torazburo, Hmm, wypróbowałem to w FF 17.0. Przy okazji świetne znalezisko, nie miałem pojęcia, że ​​coś takiego istnieje.
lorefnon
Zhakowałem kawałek mniejszego kodu, który będzie używał vw tam, gdzie jest to możliwe, i wstępnie zdefiniowanych wartości zastępczych dla różnych zapytań o media: gist.github.com/tnajdek/5143504
tnajdek
15
Zwróć uwagę, że vwodnosi się to do widocznego obszaru, a nie do rozmiaru kontenera. Prawdopodobnie przydatne w wielu przypadkach, ale svg działał lepiej dla mnie.
zelanix
68

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>
apaul
źródło
Tylko komentarz, zobacz, jak otwiera się „firefox” i wyświetla plik .pdf. To javascriptowo zmienia rozmiar treści. Dość ciężki, ale w pełni sprawny.
Milche Patern
To całkowicie zadziałało, teraz muszę tylko wyśrodkować tekst w pionie
alejandro
7

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.

ElvinD
źródło
Tak, FitText jest świetny i prosty w konfiguracji
Auxiliary Joel
6

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.

ov
źródło
2

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/

tnt-rox
źródło
1

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/

Richard Merchant
źródło
0

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.

ScottS
źródło
-2

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

font-size: calc(100% - 0.3em);
Angie
źródło
to w ogóle nie zadziała. wszystko to polega na ustawieniu rozmiaru czcionki w stosunku do rozmiaru czcionki kontenera. (minus 0,3 em)
Martijn Scheffer