Konteyner boyutuna göre yazı tipi boyutu nasıl ayarlanır?

% Genişlik ve yüksekliğe sahip bir kabım var, bu yüzden dış faktörlere bağlı olarak ölçekleniyor. Kap içindeki yazı tipinin kapların boyutuna göre sabit bir boyutta olmasını istiyorum. Bunu CSS kullanarak yapmanın iyi bir yolu var mı? font-size: x%Sadece (% 100 olacaktır) orijinal yazı tipi boyutu için uygun yazı büyütülebilir olacaktır.

Hesaplamaları kullanarak bunu CSS3 ile yapabilirsiniz, ancak JavaScript kullanmak büyük olasılıkla daha güvenli olacaktır.

İşte bir örnek: http://jsfiddle.net/8TrTU/

JS'yi kullanarak metnin yüksekliğini değiştirebilir, ardından aynı hesaplamayı bir yeniden boyutlandırma olayına bağlayabilirsiniz, yeniden boyutlandırma sırasında kullanıcı ayarlamalar yaparken veya siz öğelerinizin yeniden boyutlandırılmasına izin verirken ölçeklenir.

Yazı tipi boyutunu görüntü alanı genişliğinin yüzdesi olarak ayarlamak istiyorsanız, vwbirimi kullanın :

#mydiv { font-size: 5vw; }

Diğer alternatif, HTML'ye gömülü SVG kullanmaktır. Sadece birkaç satır olacak. Metin elemanının yazı tipi boyutu niteliği, "kullanıcı birimleri" olarak yorumlanacaktır, örneğin görünüm penceresinin açısından tanımlandığı birimler. Dolayısıyla, görüntü alanını 0 0 100 100 olarak tanımlarsanız, 1 yazı tipi boyutu, svg öğesinin boyutunun yüzde biri olacaktır.

Ve hayır, bunu CSS'de hesaplamaları kullanarak yapmanın bir yolu yoktur. Sorun, bir hesaplamadaki yüzdeler de dahil olmak üzere yazı tipi boyutu için kullanılan yüzdelerin, kabın boyutuna göre değil, miras alınan yazı tipi boyutuna göre yorumlanmasıdır. CSS bwbu amaç için (kutu genişliği) adlı bir birim kullanabilir , yani söyleyebilirsiniz div { font-size: 5bw; }, ancak bunun önerildiğini hiç duymadım.

Başka bir js alternatifi:

Çalışma Örneği

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

Veya torazaburo'nun cevabında belirtildiği gibi svg kullanabilirsiniz. Kavramın bir kanıtı olarak basit bir örnek oluşturdum:

SVG Örneği

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

Bazı projelerimde Fittext kullandım ve böyle bir soruna iyi bir çözüm gibi görünüyor.

FitText, yazı tipi boyutlarını esnek hale getirir. Ana öğenin genişliğini dolduran ölçeklenebilir başlıklar elde etmek için bu eklentiyi akışkan veya duyarlı düzeninizde kullanın.

O olamaz css ile gerçekleştirilebilir font-size

Bahsettiğiniz "dış faktörlerin" medya sorguları tarafından algılanabileceğini varsayarsak, bunları kullanabilirsiniz - ayarlamalar büyük olasılıkla önceden tanımlanmış bir dizi boyutla sınırlandırılmalıdır.

İşte fonksiyon:

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

Ardından tüm belgelerinizin alt öğe yazı tipi boyutlarını em veya% olarak dönüştürün.

Ardından temel yazı tipi boyutunu ayarlamak için kodunuza buna benzer bir şey ekleyin.

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

http://jsfiddle.net/0tpvccjt/

Benzer bir sorun yaşadım, ancak @ apaul34208 örneğinin çözemediği diğer sorunları da düşünmek zorunda kaldım. Benim durumumda;

• Medya sorgularını kullanarak görüntü alanına bağlı olarak boyutu değişen bir kapsayıcım var
• İçindeki metin dinamik olarak oluşturulur
• Ben büyütmek ve küçültmek istiyorum

En zarif örnekler değil ama benim için hile yapıyor. Pencereyi yeniden boyutlandırmayı azaltmayı düşünün ( 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/

Bu cevaptavw belirli konteyner boyutlarına göre kullanma konusunda daha ayrıntılı bir cevap verdim, bu yüzden cevabımı burada tekrar etmeyeceğim.

Bununla birlikte, özetle, esasen, kapsayıcı boyutunun görüntü alanına göre ne olacağını çarpanlara ayırma (veya kontrol etme) ve ardından vw, olması gerekenleri göz önünde bulundurarak, kapsayıcı için buna göre uygun boyutlandırma çalışması meselesidir. bir şey dinamik olarak yeniden boyutlandırılırsa.

Dolayısıyla 5vw, görüntü alanı genişliğinin% 100'ünde bir kapta bir boyut 75%istiyorsanız, muhtemelen görüntü alanı genişliğinde bir boyut olmasını istersiniz (5vw * .75) = 3.75vw.

Öğe genişliğine bağlı olarak ölçeklemek istiyorsanız, şu web bileşenini kullanabilirsiniz:
https://github.com/pomber/full-width-text

Demoyu buradan kontrol edin:
https://pomber.github.io/full-width-text/

Kullanım şu şekildedir:

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

Ayrıca şu saf CSS yöntemini deneyebilirsiniz:

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