너비와 높이가 % 인 컨테이너가 있으므로 외부 요인에 따라 확장됩니다. 컨테이너 내부의 글꼴이 컨테이너 크기에 비례하여 일정한 크기가되기를 원합니다. CSS를 사용하여이 작업을 수행하는 좋은 방법이 있습니까? 은 font-size: x%만 (100 %가 될 것이다) 원래 폰트 크기에 따른 폰트 크기를 조절한다.
답변:
계산을 사용하여 CSS3로이 작업을 수행 할 수 있지만 JavaScript를 사용하는 것이 더 안전 할 수 있습니다.
예 : http://jsfiddle.net/8TrTU/
JS를 사용하면 텍스트의 높이를 변경 한 다음 크기 조정 중에이 동일한 계산을 크기 조정 이벤트에 바인딩하여 사용자가 조정하는 동안 크기가 조정되거나 요소의 크기 조정을 허용 할 수 있습니다.
window.onresize = function(event) { yourFunctionHere(); };뿐만 아니라, 이런 식으로 사용자가 귀하의 글꼴이 적절하게 크기를 조정합니다로드 된 후 자신의 페이지 크기를 조정하기로 결정하면
글꼴 크기를 뷰포트 너비의 백분율로 설정하려면 다음 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; }있지만이 제안을 들어 본 적이 없습니다.
vw뷰포트가 아닌 컨테이너 크기를 기준으로합니다. 아마 많은 경우에 유용 할 것 같지만, svg는 저에게 더 잘 맞았습니다.
또 다른 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를 사용할 수 있습니다. 개념 증명으로 간단한 예제를 작성했습니다.
<div id="container">
<svg width="100%" height="100%" viewBox="0 0 13 15">
<text x="0" y="13">X</text>
</svg>
</div>
기능은 다음과 같습니다.
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);
}
비슷한 문제가 있었지만 @ 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://github.com/pomber/full-width-text
여기에서 데모를 확인하십시오 :
https://pomber.github.io/full-width-text/
사용법은 다음과 같습니다.
<full-width-text>Lorem Ipsum</full-width-text>
이 순수한 CSS 방법을 시도 할 수도 있습니다.
font-size: calc(100% - 0.3em);