it-swarm.com.de

wie kann ich die Schriftgröße auf Basis der Containergröße einstellen?

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

80
FurtiveFelon

Möglicherweise können Sie dies mit CSS3 mithilfe von Berechnungen durchführen. Die Verwendung von JavaScript ist jedoch höchstwahrscheinlich sicherer. 

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 Ereignis zur Größenänderung binden, das während der Größenänderung skaliert wird, während der Benutzer Anpassungen vornimmt oder ob Sie die Größenänderung Ihrer Elemente zulassen.

29
Matthew Riches

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

#mydiv { font-size: 5vw; }

Die andere Alternative ist die Verwendung von SVG, das in HTML eingebettet ist. Es werden nur ein paar Zeilen sein. Das Attribut "Schriftgröße" für das Textelement wird als "Benutzereinheiten" interpretiert, z. B. diejenigen, für die der Viewport definiert ist. Wenn Sie also Viewport als 0 0 100 100 definieren, beträgt die Schriftgröße 1 ein Hundertstel der Größe des SVG-Elements.

Nein, es gibt keine Möglichkeit, dies in CSS mithilfe von Berechnungen durchzuführen. Das Problem ist, dass Prozentsätze, die für die Schriftgröße verwendet werden, einschließlich der Prozentsätze innerhalb einer Berechnung, anhand der geerbten Schriftgröße und nicht der Größe des Containers interpretiert werden. CSS könnte für diesen Zweck eine Einheit namens bw (box-width) verwenden, man könnte also div { font-size: 5bw; } sagen, aber ich habe nie davon gehört, dass dies vorgeschlagen wurde.

148
user663031

Eine andere js 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 torazaburos Antwort angegeben Sie könnten 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>
66
apaul

Ich habe Fittext für einige meiner Projekte verwendet und es sieht nach einer guten Lösung für ein solches Problem aus.

FitText macht die Schriftgrößen flexibel. Verwenden Sie dieses Plugin in Ihrem flüssigen oder reaktionsfähigen Layout, um skalierbare Überschriften zu erzielen, die die Breite eines übergeordneten Elements ausfüllen.

6
ElvinD

Kann nicht kann mit css font-size erreicht werden

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

6
o.v.

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 Schriftarten für untergeordnete Elemente Ihrer Dokumente in em oder%.

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

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

http://jsfiddle.net/0tpvccjt/

2
tnt-rox

Ich hatte ein ähnliches Problem, musste jedoch andere Probleme in Betracht ziehen, die das @ apaul34208-Beispiel nicht anging. In meinem Fall;

  • Ich habe einen Container, dessen Größe sich abhängig vom Viewport mit Medienabfragen ändert
  • Text wird dynamisch generiert
  • Ich möchte sowohl vergrößern als auch verkleinern

Nicht die elegantesten Beispiele, aber es macht den Trick für mich. Erwägen Sie, die Fenstergröße zu drosseln ( 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/

1

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>
0
pomber

Ich habe eine detailliertere Antwort zur Verwendung von vw in Bezug auf die spezifische Containergröße in dieser Antwort ​​ gegeben, damit ich meine Antwort hier nicht nur wiederhole .

Zusammenfassend ist es jedoch im Wesentlichen eine Frage des Faktors (oder der Steuerung), wie groß der Container in Bezug auf das Ansichtsfenster sein wird, und dann die richtige Größe von vw basierend auf der Größe des Containers zu ermitteln, wobei zu berücksichtigen ist, was zu tun ist passiert, wenn die Größe eines Objekts dynamisch geändert wird.

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

0
ScottS