Wie stelle ich die Schriftgröße basierend auf der Containergröße ein?

Ich habe einen Container mit einer Breite und Höhe von%, der abhängig von externen Faktoren skaliert. Ich möchte, dass die Schriftart im Container eine konstante Größe im Verhältnis zur Größe der Container hat. Gibt es eine gute Möglichkeit, dies mit CSS zu tun? Das font-size: x%würde die Schrift nur entsprechend der ursprünglichen Schriftgröße skalieren (die 100% betragen würde).

Möglicherweise können Sie dies mit CSS3 mithilfe von Berechnungen tun. Es ist jedoch höchstwahrscheinlich sicherer, JavaScript zu verwenden.

Hier ist ein Beispiel: http://jsfiddle.net/8TrTU/

Mit JS können Sie die Höhe des Texts ändern und diese Berechnung dann einfach an ein Größenänderungsereignis binden, während die Größe geändert wird, damit sie skaliert wird, während der Benutzer Anpassungen vornimmt, oder wenn Sie die Größenänderung Ihrer Elemente zulassen.

Wenn Sie die Schriftgröße als Prozentsatz der Breite des Ansichtsfensters festlegen möchten, verwenden Sie die vwEinheit:

#mydiv { font-size: 5vw; }

Die andere Alternative ist die Verwendung von in HTML eingebettetem SVG. Es werden nur ein paar Zeilen sein. Das Schriftgrößenattribut für das Textelement wird als "Benutzereinheiten" interpretiert, z. B. diejenigen, für die das Ansichtsfenster definiert ist. Wenn Sie das Ansichtsfenster als 0 0 100 100 definieren, entspricht eine Schriftgröße von 1 einem Hundertstel der Größe des SVG-Elements.

Und nein, es gibt keine Möglichkeit, dies in CSS mithilfe von Berechnungen zu tun. Das Problem besteht darin, dass Prozentsätze, die für die Schriftgröße verwendet werden, einschließlich Prozentsätzen innerhalb einer Berechnung, als geerbte Schriftgröße und nicht als Größe des Containers interpretiert werden. CSS könnte bwzu diesem Zweck eine Einheit namens (Box-Breite) verwenden, könnte man sagen div { font-size: 5bw; }, aber ich habe diesen Vorschlag noch nie gehört.

Eine weitere Alternative:

Arbeitsbeispiel

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

Oder wie in der Antwort von torazaburo angegeben, könnten Sie svg verwenden. Ich habe ein einfaches Beispiel als Proof of Concept zusammengestellt:

SVG-Beispiel

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

Ich habe Fittext für einige meiner Projekte verwendet und es scheint eine gute Lösung für ein solches Problem zu sein.

FitText macht Schriftgrößen flexibel. Verwenden Sie dieses Plugin für Ihr flüssiges oder responsives Layout, um skalierbare Überschriften zu erhalten, die die Breite eines übergeordneten Elements ausfüllen.

Es kann nicht mit CSS erreicht werden font-size

Angenommen, "externe Faktoren", auf die Sie sich beziehen, könnten von Medienabfragen erfasst werden, könnten Sie sie verwenden - Anpassungen müssen wahrscheinlich auf eine Reihe vordefinierter Größen beschränkt werden.

Hier ist die Funktion:

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

Konvertieren Sie dann alle Schriftgrößen der untergeordneten Elemente Ihres Dokuments in ems oder%.

Fügen Sie dann Ihrem Code so etwas hinzu, um die Basisschriftgröße festzulegen.

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

http://jsfiddle.net/0tpvccjt/

Ich hatte ein ähnliches Problem, musste aber andere Probleme berücksichtigen, die im Beispiel @ apaul34208 nicht behoben wurden. In meinem Fall;

• Ich habe einen Container, dessen Größe je nach Ansichtsfenster mithilfe von Medienabfragen geändert wurde
• Text im Inneren wird dynamisch generiert
• Ich möchte sowohl vergrößern als auch verkleinern

Nicht das eleganteste Beispiel, aber es macht den Trick für mich. Erwägen Sie die Drosselung der Fenstergröße ( 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/

Ich habe in dieser Antwort eine detailliertere Antwort zur Verwendung vwin Bezug auf bestimmte Containergrößen gegeben , damit ich meine Antwort hier nicht einfach wiederhole.

Zusammenfassend geht es jedoch im Wesentlichen darum, die Containergröße in Bezug auf das Ansichtsfenster zu vwberücksichtigen (oder zu steuern) und dann die richtige Größe basierend auf der Größe für den Container zu ermitteln, wobei zu berücksichtigen ist, was geschehen muss wenn die Größe von etwas dynamisch geändert wird.

Wenn Sie also eine 5vwGröße für einen Container mit 100% der Breite 75%des Ansichtsfensters wünschen, möchten Sie wahrscheinlich eine Größe für die Breite des Ansichtsfensters (5vw * .75) = 3.75vw.

Wenn Sie es abhängig von der Elementbreite skalieren möchten, können Sie diese Webkomponente verwenden:
https://github.com/pomber/full-width-text

Überprüfen Sie die Demo hier:
https://pomber.github.io/full-width-text/

Die Verwendung ist wie folgt:

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

Sie können auch diese reine CSS-Methode ausprobieren:

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