css

Question 1

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

Question 2

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

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

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

Question 3

글꼴 크기를 뷰포트 너비의 백분율로 설정하려면 다음 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; }있지만이 제안을 들어 본 적이 없습니다.

Question 4

또 다른 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>

Question 5

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

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

Question 6

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

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

Question 7

기능은 다음과 같습니다.

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

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

그런 다음 코드에 이와 같은 것을 추가하여 기본 글꼴 크기를 설정하십시오.

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

http://jsfiddle.net/0tpvccjt/

Question 8

비슷한 문제가 있었지만 @ apaul34208 예제가 다루지 않은 다른 문제를 고려해야했습니다. 나의 경우에는;

미디어 쿼리를 사용하여 뷰포트에 따라 크기가 변경된 컨테이너가 있습니다.
내부 텍스트는 동적으로 생성됩니다.
스케일 업도 다운하고 싶다

가장 우아한 예는 아니지만 나를 위해 트릭을 수행합니다. 창 크기 조정 ( 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/