컨테이너 크기에 따라 글꼴 크기를 설정하는 방법은 무엇입니까?

컨테이너 크기에 따라 글꼴 크기를 설정하는 방법은 무엇입니까?

---

너비와 높이가 % 인 컨테이너가 있으므로 외부 요인에 따라 확장됩니다. 컨테이너 내부의 글꼴이 컨테이너 크기에 비례하여 일정한 크기가되기를 바랍니다. CSS를 사용하여이 작업을 수행하는 좋은 방법이 있습니까? 은 font-size: x%만 (100 %가 될 것이다) 원래 폰트 크기에 따른 폰트 크기를 조절한다.

---

계산을 사용하여 CSS3로이 작업을 수행 할 수 있지만 JavaScript를 사용하는 것이 더 안전 할 수 있습니다.

예 : http://jsfiddle.net/8TrTU/

JS를 사용하면 텍스트의 높이를 변경 한 다음 크기 조정 중에이 동일한 계산을 크기 조정 이벤트에 바인딩하여 사용자가 조정하는 동안 크기가 조정되거나 요소의 크기를 조정할 수 있습니다.

---

글꼴 크기를 뷰포트 너비의 백분율로 설정하려면 다음 vw단위를 사용하십시오 .

#mydiv { font-size: 5vw; }

다른 대안은 HTML에 포함 된 SVG를 사용하는 것입니다. 몇 줄이면됩니다. 텍스트 요소에 대한 font-size 속성은 "사용자 단위"로 해석됩니다 (예 : 뷰포트가 정의 된 단위). 따라서 뷰포트를 0 0 100 100으로 정의하면 글꼴 크기 1은 svg 요소 크기의 100 분의 1이됩니다.

그리고 계산을 사용하여 CSS에서이를 수행 할 수있는 방법이 없습니다. 문제는 계산 내의 백분율을 포함하여 글꼴 크기에 사용되는 백분율이 컨테이너의 크기가 아니라 상속 된 글꼴 크기의 관점에서 해석된다는 것입니다. CSS는 bw이 목적을 위해 (box-width) 라는 단위를 사용할 수 있으므로라고 말할 수는 div { font-size: 5bw; }있지만이 제안을 들어 본 적이 없습니다.

---

또 다른 js 대안 :

작업 예

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

또는 torazaburo의 답변 에서 언급했듯이 svg를 사용할 수 있습니다. 개념 증명으로 간단한 예제를 작성했습니다.

SVG 예

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

---

일부 프로젝트에서 Fittext 를 사용 했는데 이와 같은 문제에 대한 좋은 해결책 인 것 같습니다.

FitText는 글꼴 크기를 유연하게 만듭니다. 유동적이거나 반응 형 레이아웃에서이 플러그인을 사용하여 상위 요소의 너비를 채우는 확장 가능한 헤드 라인을 얻을 수 있습니다.

---

그것은 할 수없는 CSS를 함께 수행 할 글꼴 크기

언급 한 "외부 요인"이 미디어 쿼리에 의해 선택 될 수 있다고 가정하면이를 사용할 수 있습니다. 조정은 미리 정의 된 크기 집합으로 제한되어야합니다.

---

기능은 다음과 같습니다.

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

그런 다음 모든 문서 하위 요소 글꼴 크기를 em 또는 %로 변환합니다.

Then add something like this to your code to set the base font size.

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

http://jsfiddle.net/0tpvccjt/

---

I had a similar issue but I had to consider other issues that @apaul34208 example did not tackle. In my case;

• I have a container that changed size depending on the viewport using media queries
• Text inside is dynamically generated
• I want to scale up as well as down

Not the most elegant of examples but it does the trick for me. Consider using throttling the window resize (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/

---

I've given a more detailed answer of using vw with respect to specific container sizing in this answer, so I won't just repeat my answer here.

In summary, however, it is essentially a matter of factoring (or controlling) what the container size is going to be with respect to viewport, and then working out the proper vw sizing based on that for the container, taking mind of what needs to happen if something is dynamically resized.

So if you wanted a 5vw size at a container at 100% of the viewport width, then one at 75% of the viewport width you would probably want to be (5vw * .75) = 3.75vw.

---

If you want to scale it depending on the element width, you can use this web component:
https://github.com/pomber/full-width-text

Check the demo here:
https://pomber.github.io/full-width-text/

The usage is like this:

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

---

You can also try this pure CSS method:

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

참고URL : https://stackoverflow.com/questions/10292001/how-to-set-font-size-based-on-container-size