làm thế nào để đặt kích thước phông chữ dựa trên kích thước vùng chứa?

Tôi có một thùng chứa có% chiều rộng và chiều cao, vì vậy nó sẽ thay đổi tỷ lệ tùy thuộc vào các yếu tố bên ngoài. Tôi muốn phông chữ bên trong vùng chứa có kích thước không đổi so với kích thước của vùng chứa. Có cách nào tốt để làm điều này bằng cách sử dụng CSS không? Chỉ font-size: x%sẽ chia tỷ lệ phông chữ theo kích thước phông chữ ban đầu (sẽ là 100%).

Bạn có thể làm điều này với CSS3 bằng cách sử dụng tính toán, tuy nhiên, rất có thể sẽ an toàn hơn khi sử dụng JavaScript.

Đây là một ví dụ: http://jsfiddle.net/8TrTU/

Sử dụng JS, bạn có thể thay đổi chiều cao của văn bản, sau đó chỉ cần liên kết cùng phép tính này với một sự kiện thay đổi kích thước, trong quá trình thay đổi kích thước để nó thay đổi tỷ lệ trong khi người dùng thực hiện điều chỉnh hoặc tuy nhiên bạn cho phép thay đổi kích thước các phần tử của mình.

Nếu bạn muốn đặt kích thước phông chữ theo tỷ lệ phần trăm của chiều rộng khung nhìn, hãy sử dụng vwđơn vị:

#mydiv { font-size: 5vw; }

Giải pháp thay thế khác là sử dụng SVG được nhúng trong HTML. Nó sẽ chỉ là một vài dòng. Thuộc tính font-size cho phần tử văn bản sẽ được hiểu là "đơn vị người dùng", chẳng hạn như những thuộc tính mà chế độ xem được định nghĩa. Vì vậy, nếu bạn xác định khung nhìn là 0 0 100 100, thì kích thước phông chữ là 1 sẽ bằng một phần trăm kích thước của phần tử svg.

Và không, không có cách nào để làm điều này trong CSS bằng cách sử dụng tính toán. Vấn đề là tỷ lệ phần trăm được sử dụng cho kích thước phông chữ, bao gồm cả tỷ lệ phần trăm bên trong một phép tính, được giải thích theo kích thước phông chữ kế thừa, không phải kích thước của vùng chứa. CSS có thể sử dụng một đơn vị được gọi là bw(chiều rộng hộp) cho mục đích này, vì vậy bạn có thể nói div { font-size: 5bw; }, nhưng tôi chưa bao giờ nghe đề xuất này.

Một thay thế js khác:

Ví dụ làm việc

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

Hoặc như đã nêu trong câu trả lời của torazaburo, bạn có thể sử dụng svg. Tôi kết hợp một ví dụ đơn giản để làm bằng chứng cho khái niệm:

Ví dụ SVG

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

Tôi đã sử dụng Fittext trong một số dự án của mình và nó có vẻ là một giải pháp tốt cho một vấn đề như thế này.

FitText làm cho kích thước phông chữ linh hoạt. Sử dụng plugin này trên bố cục linh hoạt hoặc đáp ứng của bạn để đạt được các tiêu đề có thể mở rộng lấp đầy chiều rộng của phần tử mẹ.

Nó không thể được thực hiện với kích thước phông chữ css

Giả sử rằng "các yếu tố bên ngoài" mà bạn đang đề cập có thể được các truy vấn phương tiện chọn ra, bạn có thể sử dụng chúng - các điều chỉnh có thể sẽ phải được giới hạn trong một tập hợp các kích thước được xác định trước.

Đây là chức năng:

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

Sau đó, chuyển đổi tất cả các kích thước phông chữ phần tử con tài liệu của bạn thành em's hoặc%.

Sau đó, thêm một cái gì đó như thế này vào mã của bạn để đặt kích thước phông chữ cơ sở.

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

http://jsfiddle.net/0tpvccjt/

Tôi đã gặp sự cố tương tự nhưng tôi phải xem xét các vấn đề khác mà ví dụ @ apaul34208 không giải quyết được. Trong trường hợp của tôi;

• Tôi có một vùng chứa đã thay đổi kích thước tùy thuộc vào chế độ xem bằng cách sử dụng truy vấn phương tiện
• Văn bản bên trong được tạo động
• Tôi muốn mở rộng quy mô cũng như giảm xuống

Không phải là ví dụ thanh lịch nhất nhưng nó thực sự là một mẹo nhỏ đối với tôi. Cân nhắc sử dụng điều chỉnh thay đổi kích thước cửa sổ ( 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/

Tôi đã đưa ra câu trả lời chi tiết hơn về việc sử dụng vwđối với kích thước vùng chứa cụ thể trong câu trả lời này , vì vậy tôi sẽ không chỉ lặp lại câu trả lời của mình ở đây.

Tuy nhiên, tóm lại, về cơ bản là vấn đề bao gồm (hoặc kiểm soát) kích thước vùng chứa sẽ như thế nào đối với chế độ xem và sau đó tính toán vw kích thước dựa trên kích thước đó cho vùng chứa, lưu ý đến những gì cần xảy ra nếu một cái gì đó được thay đổi kích thước động.

Vì vậy, nếu bạn muốn một 5vwkích thước tại vùng chứa bằng 100% chiều rộng khung nhìn, thì bạn có thể muốn có một kích thước ở 75%chiều rộng khung nhìn (5vw * .75) = 3.75vw.

Nếu bạn muốn chia tỷ lệ tùy thuộc vào chiều rộng phần tử, bạn có thể sử dụng thành phần web này:
https://github.com/pomber/full-width-text

Kiểm tra bản demo tại đây:
https://pomber.github.io/full-width-text/

Cách sử dụng như thế này:

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

Bạn cũng có thể thử phương pháp CSS thuần túy này:

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