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

82

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

FurtiveFelon
quelle

Antworten:

29

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.

Matthew Riches
quelle
Versuchen Sie es mit: Auch window.onresize = function(event) { yourFunctionHere(); };wenn der Benutzer beschließt, die Größe seiner Seite zu ändern, nachdem er Ihre Schriftart geladen hat, wird die Größe entsprechend
geändert
150

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.


quelle
1
An welchen Browsern arbeitet vw? Ich kann es nicht in Firefox zum Laufen bringen.
Lorefnon
1
@lorefnon, diese Seite caniuse.com/#feat=viewport-units sagt, dass es in Firefox 19 funktionieren wird, während Sie Chrome ausprobieren.
@ Torazburo, Hmm, habe es in FF 17.0 versucht. Toller Fund übrigens, hatte keine Ahnung, dass so etwas existiert.
Lorefnon
Ich habe ein Stück weniger Code zusammen gehackt, das vw verwendet, sofern verfügbar, und vordefinierte Werte für verschiedene Medienabfragen zurücksetzt
tnajdek
15
Beachten Sie, dass dies vwrelativ zum Ansichtsfenster und nicht zur Containergröße ist. Wahrscheinlich in vielen Fällen nützlich, aber svg hat bei mir besser funktioniert.
Zelanix
66

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>
apaul
quelle
Schauen Sie sich an, wie 'Firefox' geöffnet wird, und zeigen Sie eine PDF-Datei an. Es ändert die Größe des Inhalts in Javascript. Ziemlich schwer, aber voll funktionsfähig.
Milche Patern
Das hat bei mir total funktioniert, jetzt muss ich nur noch den Text vertikal
zentrieren
7

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.

ElvinD
quelle
Yep FitText ist großartig und einfach einzurichten
Auxiliary Joel
6

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.

ov
quelle
2

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/

tnt-rox
quelle
1

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/

Richard Merchant
quelle
0

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.

ScottS
quelle
-2

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

font-size: calc(100% - 0.3em);
Angie
quelle
das wird überhaupt nicht funktionieren. Dazu wird lediglich die Schriftgröße relativ zur Schriftgröße des Containers festgelegt. (minus 0,3 em)
Martijn Scheffer