컨테이너 너비에 따른 글꼴 크기 조정
글꼴 크기 조정에 대해 고민하고 있습니다.
현재이 사이트 는 본문 font-size이 100 %입니다. 그래도 100 %? 이것은 16 픽셀에서 계산되는 것 같습니다.
나는 100 %가 어떻게 든 브라우저 창의 크기를 참조 할 것이라는 인상을 받았지만, 창 크기가 모바일 너비로 조정 되든 아니면 완전히 날아간 와이드 스크린 데스크톱으로 조정 되든 항상 16 픽셀이기 때문이 아닙니다.
컨테이너와 관련하여 사이트의 텍스트 크기를 어떻게 만들 수 있습니까? 을 사용해 em보았지만 이것도 확장되지 않습니다.
나의 추론은 크기를 조정할 때 나는 줄일 필요가 그래서 내 메뉴 같은 그 일이 찌그러 될 것입니다 px font-size의를 .menuItem컨테이너의 폭과 관련하여 다른 요소들. (예를 들어 큰 데스크탑의 메뉴에서 22px완벽하게 작동합니다. 태블릿 너비로 이동하면 16px더 적합합니다.)
내가 중단 점을 추가 할 수 있습니다 알고 있어요,하지만 난 정말 텍스트로 확장 할 뿐만 그렇지 않으면 내가 매 100 개 픽셀 중단 점의 수백 결국 텍스트를 제어하는 폭 감소거야, 여분의 중단 점을 가지고있다.
편집 : 컨테이너가 본문이 아닌 경우 CSS 트릭은 컨테이너에 텍스트 맞춤의 모든 옵션을 다룹니다 .
컨테이너가 본문 인 경우 찾고있는 것은 Viewport-percentage lengths입니다 .
뷰포트 백분율 길이 의 크기를 기준으로 초기 함유 블록 . 초기 컨테이너 블록의 높이 또는 너비가 변경되면 그에 따라 크기가 조정됩니다. 그러나 루트 요소의 오버플로 값이 auto이면 스크롤 막대가 존재하지 않는 것으로 간주됩니다.
값은 다음과 같습니다.
vw(뷰포트 너비의 %)vh(뷰포트 높이의 %)vi(루트 요소의 인라인 축 방향으로 뷰포트 크기의 1 %)vb(루트 요소의 블록 축 방향으로 뷰포트 크기의 1 %)vmin(vw또는 중 더 작음vh)vmax(크거나vw또는vh)
1 v *는 초기 컨테 이닝 블록의 1 %와 같습니다.
사용하면 다음과 같습니다.
p {
font-size: 4vw;
}
보시다시피 뷰포트 너비가 증가하면 미디어 쿼리를 사용할 필요없이 글꼴 크기도 증가합니다.
이러한 값처럼 사이징 부이다 px또는 em그들도 크기 다른 요소들에 사용될 수 있으므로, 그러한 폭 마진 또는 패딩이었다.
브라우저 지원은 꽤 좋지만 다음과 같은 대체가 필요할 수 있습니다.
p {
font-size: 16px;
font-size: 4vw;
}
지원 통계를 확인하십시오 : http://caniuse.com/#feat=viewport-units .
또한 더 넓은 모습을 보려면 CSS-Tricks를 확인하세요. Viewport Sized Typography
다음은 최소 / 최대 크기를 설정하고 크기를 좀 더 제어하는 방법에 대한 좋은 기사입니다. 반응 형 타이포그래피에 대한 정확한 제어
다음은 calc ()를 사용하여 텍스트가 뷰포트를 채우도록 크기를 설정하는 방법에 대한 기사입니다. http://codepen.io/CrocoDillon/pen/fBJxu
또한 선 높이를 조정하기 위해 '녹은 선'이라는 기술을 사용하는이 기사를 참조하십시오. CSS의 용융 선도
하지만 컨테이너가 뷰포트 (본체)가 아니면 어떻게 될까요?
이 질문은 수용된 답변에 따라 Alex의 의견에 묻습니다 .
그 사실이 vw그 용기의 크기에 어느 정도 사용할 수 없다는 것을 의미하지는 않습니다 . 이제 모든 변형을 확인하려면 컨테이너의 크기가 어떤 식 으로든 유연하다고 가정해야합니다. 직접 백분율 width또는 100 % 마이너스 마진을 통해. 컨테이너가 항상 200px넓게 설정되어 있으면 포인트가 "moot"가됩니다. 그런 다음 font-size해당 너비에 맞는 a 를 설정하면 됩니다.
예 1
그러나 유연한 너비 컨테이너를 사용하는 경우 어떤 방식 으로든 컨테이너가 여전히 뷰포트에서 크기가 조정되고 있음을 인식해야합니다 . 따라서 vw뷰포트에 대한 백분율 크기 차이를 기준 으로 설정 을 조정하는 문제입니다. 즉, 상위 래퍼의 크기를 고려하는 것입니다. 이 예를 들어 보자 :
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
So if the container is 50% of viewport (as here)
then factor that into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
*/
font-size: 2.5vw;
}
(가) 여기에 가정 div의 자녀이며 body, 그것은이다 50%그의 100%기본적인 경우 뷰포트 크기 폭. 기본적으로 자신에게 vw잘 어울리는 a를 설정하고 싶습니다 . 위의 CSS 콘텐츠의 내 의견에서 볼 수 있듯이 전체 뷰포트 크기와 관련하여 수학적으로 "생각"할 수 있지만 그렇게 할 필요 는 없습니다 . 컨테이너가 뷰포트 크기 조정에 따라 구부러지기 때문에 텍스트는 컨테이너와 함께 "유연"하게됩니다. 업데이트 : 다음은 크기가 다른 두 컨테이너의 예입니다 .
예 2
이를 기반으로 계산을 강제함으로써 뷰포트 크기 조정을 보장 할 수 있습니다. 이 예를 고려하십시오 .
html {width: 100%;} /* Force 'html' to be viewport width */
body {width: 150%; } /* Overflow the body */
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
Here, the body is 150% of viewport, but the container is 50%
of viewport, so both parents factor into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 3.75vw
(5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
*/
font-size: 3.75vw;
}
크기 조정은 여전히 뷰포트를 기반으로하지만 본질적으로 컨테이너 크기 자체를 기반으로 설정됩니다.
컨테이너 크기를 동적으로 변경해야하는 경우 ...
컨테이너 요소의 크기 조정이 @media중단 점 또는 JavaScript 를 통해 백분율 관계를 동적으로 변경하는 경우 기본 "대상"이 무엇이든 텍스트 크기 조정에 대해 동일한 "관계"를 유지하기 위해 재 계산이 필요합니다.
위의 예 # 1을 살펴보십시오. 또는 JavaScript에 의해 너비 div로 전환 된 경우 동시에은 미디어 쿼리 또는 JavaScript에서의 새로운 계산에 맞게 조정해야합니다 . 이렇게하면 원래 컨테이너 의 "너비"가 뷰포트 크기 조정에서 절반으로 줄어들 었을 때와 동일한 크기로 텍스트 크기가 설정 되지만 이제는 자체 백분율 계산의 변경으로 인해 축소되었습니다.25%@mediafont-size5vw * .25 = 1.2550%
도전
함께 CSS3의 calc()기능을 사용, 그 기능이 작동하지 않는 동적으로 조정하기 어려워 질 것이다 font-size이 시간에 목적. 따라서 너비가 on으로 변경되면 순수한 CSS 3 조정을 수행 할 수 없습니다 calc(). 물론 여백의 너비를 약간 조정하는 것만으로는의 변경을 보증하기에 충분하지 않을 수 font-size있으므로 중요하지 않을 수 있습니다.
SVG 솔루션 :
<div style="width: 60px;">
<svg width="100%" height="100%" viewBox="0 -200 1000 300"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text font-size="300" fill="black">Text</text>
</svg>
</div>
https://jsfiddle.net/qc8ht5eb/
다음을 사용하는 SVG 및 텍스트 래핑 솔루션 foreignObject:
<svg viewBox="0 0 100 100">
<foreignObject width="100%" height="100%">
<h1>heading</h1>
lorem ipsum dolor sit amet
</foreignObject>
</svg>
https://jsfiddle.net/2rp1q0sy/
내 프로젝트 중 하나에서 vw와 vh 사이에 "혼합"을 사용하여 내 필요에 맞게 글꼴 크기를 조정합니다. 예를 들면 다음과 같습니다.
font-size: calc(3vw + 3vh);
나는 이것이 OP의 질문에 대답하지 않는다는 것을 알고 있지만 아마도 다른 사람에게 해결책이 될 수 있습니다.
이 문제에 대한 큰 철학이 있습니다.
가장 쉬운 방법은 본문에 특정 글꼴 크기를 지정하는 것입니다 (10을 권장합니다). 그러면 다른 모든 요소는 em또는 rem. 그 단위를 이해하는 예를 들어 보겠습니다. Em항상 부모에 상대적입니다.
body{font-size: 10px;}
.menu{font-size: 2em;} /* That means 2*10 pixels = 20 pixels */
.menu li{font-size: 1.5em;} /* That means 1.5*20 pixels = 30 pixels */
Rem 항상 body에 상대적입니다.
body{font-size: 10px;}
.menu{font-size: 2rem;} /* That means 2*10 pixels = 20 pixels */
.menu li{font-size: 1.5rem;} /* that means 1.5*10 pixels = 15 pixels */
그런 다음 컨테이너 너비에 비례하여 글꼴 크기를 수정하는 스크립트를 만들 수 있습니다. 그러나 이것은 내가 권장하는 것이 아닙니다. 예를 들어 900 픽셀 너비의 컨테이너에는 p글꼴 크기가 12 픽셀 인 요소가 있다고 가정 해 보겠습니다. 그리고 그것은 4 픽셀 글꼴 크기의 300 픽셀 너비 컨테이너가 될 아이디어에 있습니다. 하한이 있어야합니다.
다른 솔루션은 미디어 쿼리를 사용하여 다른 너비에 대한 글꼴을 설정할 수 있습니다.
하지만 제가 권장하는 솔루션은이를 지원하는 JavaScript 라이브러리를 사용하는 것입니다. 그리고 지금까지 찾은 fittext.js .
calc(), CSS 단위 및 수학이 포함 된 Pure-CSS 솔루션
이것은 OP가 요구하는 것은 아니지만 누군가의 하루를 만들 수 있습니다. 이 답변은 숟가락으로 먹이기 쉽지 않으며 개발자 측에 대한 연구가 필요합니다.
나는 마침내 calc()다른 장치와 함께 사용하여 순수한 CSS 솔루션을 얻었습니다 . 에 대한 표현을 계산하려면 공식에 대한 기본적인 수학적 이해가 필요합니다 calc().
이 문제를 해결했을 때 DOM에서 몇 가지 부모를 패딩 한 전체 페이지 너비 응답 헤더를 얻어야했습니다. 여기에서 내 가치를 사용하고 자신의 가치로 대체하겠습니다.
수학으로
필요할 것이예요:
- 일부 뷰포트에서 비율을 잘 조정했습니다. 320 픽셀을 사용했기 때문에 높이는 24 픽셀, 너비는 224 픽셀이므로 비율은 9.333 ... 또는 28/3입니다.
- 컨테이너 너비
padding: 3em와 전체 너비가100wv - 2 * 3em
X는 컨테이너의 너비이므로 자신의 표현식으로 바꾸거나 값을 조정하여 전체 페이지 텍스트를 얻습니다. R당신이 가질 비율입니다. 일부 뷰포트에서 값을 조정하고 요소 너비와 높이를 검사 한 다음 자신의 값으로 대체하여 얻을 수 있습니다. 또한 width / heigth;)
x = 100vw - 2 * 3em = 100vw - 6em
r = 224px/24px = 9.333... = 28 / 3
y = x / r
= (100vw - 6em) / (28 / 3)
= (100vw - 6em) * 3 / 28
= (300vw - 18em) / 28
= (75vw - 4.5rem) / 7
그리고 쾅! 작동했습니다! 나는 썼다
font-size: calc((75vw - 4.5rem) / 7)
내 헤더에 추가하고 모든 뷰포트에서 멋지게 조정되었습니다.
하지만 어떻게 작동합니까?
여기에 상수가 필요합니다. 100vw뷰포트의 전체 너비를 의미하며 내 목표는 패딩으로 전체 너비 헤더를 설정하는 것이 었습니다.
비율. 한 뷰포트에서 너비와 높이를 얻는 것은 나에게 놀아 줄 비율을 얻었고, 비율로 다른 뷰포트 너비에서 높이가 무엇인지 압니다. 손으로 계산하는 것은 많은 시간과 최소한 많은 대역폭을 필요로하기 때문에 좋은 답이 아닙니다.
결론
왜 아무도 이것을 알아 내지 못했고 어떤 사람들은 이것이 CSS로 땜질하는 것이 불가능하다고 말하고 있는지 궁금합니다. 요소를 조정할 때 JavaScript를 사용하는 것을 좋아하지 않으므로 더 많이 파지 않고 JavaScript (jQuery는 잊어 버림) 답변을 받아들이지 않습니다. 대체로 이것이 알아 낸 것이 좋습니다. 이것은 웹 사이트 디자인에서 순수한 CSS 구현을위한 한 단계입니다.
나는 내 텍스트의 비정상적인 관습에 대해 사과하고, 영어 원어민이 아니며 Stack Overflow 답변을 작성하는 데 아주 익숙합니다.
또한 일부 브라우저에는 악의적 인 스크롤바가 있습니다. 예를 들어, Firefox를 사용할 때 100vw스크롤바 (콘텐츠가 확장 할 수없는 곳!) 아래로 확장되는 뷰포트의 전체 너비 를 의미하므로 전체 너비 텍스트는 신중하게 여백을 만들어야하며 가급적이면 여러 브라우저와 장치에서 테스트해야합니다.
기능은 다음과 같습니다.
document.body.setScaledFont = function(f) {
var s = this.offsetWidth, fs = s * f;
this.style.fontSize = fs + '%';
return this
};
그런 다음 모든 문서 하위 요소 글꼴 크기를 em's 또는 %.
그런 다음 코드에 다음과 같이 추가하여 기본 글꼴 크기를 설정합니다.
document.body.setScaledFont(0.35);
window.onresize = function() {
document.body.setScaledFont(0.35);
}
JavaScript 없이이 작업을 수행 할 수있는 방법이 있습니다 !
인라인 SVG 이미지를 사용할 수 있습니다. 인라인 인 경우 SVG에서 CSS를 사용할 수 있습니다. 이 방법을 사용하면 SVG 이미지가 컨테이너 크기에 응답한다는 것을 기억해야합니다.
다음 솔루션을 사용해보십시오 ...
HTML
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.96 358.98" >
<text>SAVE $500</text>
</svg>
</div>
CSS
div {
width: 50%; /* Set your container width */
height: 50%; /* Set your container height */
}
svg {
width: 100%;
height: auto;
}
text {
transform: translate(40px, 202px);
font-size: 62px;
fill: #000;
}
예 : https://jsfiddle.net/k8L4xLLa/32/
더 화려한 것을 원하십니까?
SVG 이미지를 사용하면 모양과 쓰레기로 멋진 작업을 수행 할 수도 있습니다. 확장 가능한 텍스트에 대한이 훌륭한 사용 사례를 확인하십시오.
https://jsfiddle.net/k8L4xLLa/14/
이것은 매우 실용적이지 않을 수 있지만 div / 페이지의 크기를 읽기 위해 수신 / 루프 (간격)하는 JavaScript없이 글꼴이 부모의 직접적인 기능이되기를 원하는 경우이를 수행하는 방법이 있습니다. . Iframes.
iframe 내의 모든 항목은 iframe의 크기를 뷰포트의 크기로 간주합니다. 따라서 트릭은 너비가 텍스트의 최대 너비이고 높이가 최대 높이 * 특정 텍스트의 종횡비와 같은 iframe을 만드는 것입니다.
뷰포트 단위가 텍스트에 대한 측면 상위 단위를 따라 올 수 없다는 제한을 제쳐두고 (예 : % 크기가 다른 모든 사용자와 같이 작동 함) 뷰포트 단위는 매우 강력한 도구를 제공합니다. 최소 / 최대 크기를 얻을 수 있습니다. . 다른 곳에서는 할 수 없습니다. 말할 수 없습니다 ...이 div의 높이를 부모의 너비 * 무언가로 만드십시오.
즉, 트릭은 vmin을 사용하고 높이가 제한 치수 일 때 [fraction] * total height가 좋은 글꼴 크기가되도록 iframe 크기를 설정하고 너비가 다음과 같을 때 [fraction] * total width를 설정하는 것입니다. 제한 차원. 이것이 높이가 너비와 가로 세로 비율의 곱이어야하는 이유입니다.
내 특정 예를 들어, 당신은
.main iframe{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: calc(3.5 * 100%);
background: rgba(0, 0, 0, 0);
border-style: none;
transform: translate3d(-50%, -50%, 0);
}
이 방법의 작은 성가심은 iframe의 CSS를 수동으로 설정해야한다는 것입니다. 전체 CSS 파일을 첨부하면 많은 텍스트 영역에서 많은 대역폭을 차지합니다. 그래서 제가하는 일은 CSS에서 직접 원하는 규칙을 첨부하는 것입니다.
var rule = document.styleSheets[1].rules[4];
var iDoc = document.querySelector('iframe').contentDocument;
iDoc.styleSheets[0].insertRule(rule.cssText);
CSS 규칙 / 텍스트 영역에 영향을 미치는 모든 CSS 규칙을 가져 오는 작은 함수를 작성할 수 있습니다.
사이클링 / 듣기 JavaScript 없이는 다른 방법을 생각할 수 없습니다. 브라우저가 부모 컨테이너의 함수로 규모의 텍스트에 대한 방법을 제공하기위한 진정한 해결책이 될 것 과 같은 VMIN / VMAX 형 기능을 제공합니다.
JSFiddle : https://jsfiddle.net/0jr7rrgm/3/ (한 번 클릭하면 빨간색 사각형이 마우스에 고정되고 다시 클릭하면 해제됩니다.)
바이올린에있는 대부분의 JavaScript는 내 사용자 지정 클릭 드래그 기능 일뿐입니다.
사용 vw, em및 공동. 확실히 작동하지만 IMO는 항상 미세 조정을 위해 인간의 손길이 필요합니다.
다음 은 인간의 손길을 자동화하려는 @ tnt-rox ' 답변 을 기반으로 작성한 스크립트입니다 .
$('#controller').click(function(){
$('h2').each(function(){
var
$el = $(this),
max = $el.get(0),
el = null
;
max =
max
? max.offsetWidth
: 320
;
$el.css({
'font-size': '1em',
'display': 'inline',
});
el = $el.get(0);
el.get_float = function(){
var
fs = 0
;
if (this.style && this.style.fontSize) {
fs = parseFloat(this.style.fontSize.replace(/([\d\.]+)em/g, '$1'));
}
return fs;
};
el.bigger = function(){
this.style.fontSize = (this.get_float() + 0.1) + 'em';
};
while (el.offsetWidth < max) {
el.bigger();
}
// Finishing touch.
$el.css({
'font-size': ((el.get_float() -0.1) +'em'),
'line-height': 'normal',
'display': '',
});
}); // end of (each)
}); // end of (font scaling test)div {
width: 50%;
background-color: tomato;
font-family: 'Arial';
}
h2 {
white-space: nowrap;
}
h2:nth-child(2) {
font-style: italic;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" id="controller" value="Apply" />
<div>
<h2>Lorem ipsum dolor</h2>
<h2>Test String</h2>
<h2>Sweet Concatenation</h2>
<h2>Font Scaling</h2>
</div>기본적으로 글꼴 크기를 줄인 1em다음 최대 너비에 도달 할 때까지 0.1 씩 증가하기 시작합니다.
내 자신의 솔루션 인 jQuery 기반은 컨테이너의 높이가 크게 증가 할 때까지 (줄 바꿈이 있음을 의미) 점차 글꼴 크기를 늘려 작동합니다.
매우 간단하지만 상당히 잘 작동하고 사용하기가 매우 쉽습니다. 당신은 알 필요가 없습니다 아무것도 사용되는 글꼴에 대한을 모든 브라우저에 의해 처리된다.
http://jsfiddle.net/tubededentifrice/u5y15d0L/2/ 에서 재생할 수 있습니다.
마법은 여기에서 발생합니다.
var setMaxTextSize=function(jElement) {
// Get and set the font size into data for reuse upon resize
var fontSize=parseInt(jElement.data(quickFitFontSizeData)) || parseInt(jElement.css("font-size"));
jElement.data(quickFitFontSizeData, fontSize);
// Gradually increase font size until the element gets a big increase in height (i.e. line break)
var i = 0;
var previousHeight;
do
{
previousHeight=jElement.height();
jElement.css("font-size", "" + (++fontSize) + "px");
}
while(i++ < 300 && jElement.height()-previousHeight < fontSize/2)
// Finally, go back before the increase in height and set the element as resized by adding quickFitSetClass
fontSize -= 1;
jElement.addClass(quickFitSetClass).css("font-size", "" + fontSize + "px");
return fontSize;
};
이 웹 구성 요소 는 내부 텍스트 너비가 컨테이너 너비와 일치하도록 글꼴 크기를 변경합니다. 데모를 확인하십시오 .
다음과 같이 사용할 수 있습니다.
<full-width-text>Lorem Ipsum</full-width-text>
100 %는 기본 글꼴 크기를 기준으로하며, 설정하지 않은 경우 브라우저의 사용자 에이전트 기본값이됩니다.
원하는 효과를 얻으려면 JavaScript 코드를 사용하여 창 크기를 기준으로 기본 글꼴 크기를 조정합니다.
CSS 내부에 디자인이 깨지기 시작할 때마다 320 픽셀 너비를 변경하여 하단에 추가해보세요.
@media only screen and (max-width: 320px) {
body { font-size: 1em; }
}
그런 다음 원하는대로 글꼴 크기를 "px"또는 "em"으로 지정하십시오.
http://simplefocus.com/flowtype/ 시도 하십시오 . 이것이 내가 내 사이트에 사용하는 것이며 완벽하게 작동했습니다.
다음과 같은 것을 찾고있을 수 있습니다.
http://jsfiddle.net/sijav/dGsC9/4/
http://fiddle.jshell.net/sijav/dGsC9/4/show/
나는 flowtype 을 사용 했으며 훌륭하게 작동합니다 (그러나 순수한 CSS 솔루션이 아닌 JavaScript입니다).
$('body').flowtype({
minFont: 10,
maxFont: 40,
minimum: 500,
maximum: 1200,
fontRatio: 70
});
글꼴 크기 대신 CSS 변환을 사용하여 간단한 크기 조정 기능을 준비했습니다. 모든 컨테이너 내부에서 사용할 수 있으며 미디어 쿼리 등을 설정할 필요가 없습니다. :)
블로그 게시물 : 전체 너비 CSS 및 JS 확장 가능 헤더
코드:
function scaleHeader() {
var scalable = document.querySelectorAll('.scale--js');
var margin = 10;
for (var i = 0; i < scalable.length; i++) {
var scalableContainer = scalable[i].parentNode;
scalable[i].style.transform = 'scale(1)';
var scalableContainerWidth = scalableContainer.offsetWidth - margin;
var scalableWidth = scalable[i].offsetWidth;
scalable[i].style.transform = 'scale(' + scalableContainerWidth / scalableWidth + ')';
scalableContainer.style.height = scalable[i].getBoundingClientRect().height + 'px';
}
}
작업 데모 : https://codepen.io/maciejkorsan/pen/BWLryj
내 문제는 비슷했지만 제목 내에서 텍스트 크기 조정과 관련이 있습니다. Fit Font를 시도했지만 Text Flow와 마찬가지로 약간 다른 문제를 해결하기 때문에 결과를 얻기 위해 압축기를 토글해야했습니다.
나는 당신이 가정, 컨테이너에 맞게 글꼴 크기를 감소 내 자신의 작은 플러그인 썼다 그래서 overflow: hidden및 white-space: nowrap그래서 심지어는 최소 글꼴을 줄이는 경우 전체 제목을 보여주는 허용하지 않습니다를, 단지 그것을 보여줄 수있는 차단.
(function($) {
// Reduces the size of text in the element to fit the parent.
$.fn.reduceTextSize = function(options) {
options = $.extend({
minFontSize: 10
}, options);
function checkWidth(em) {
var $em = $(em);
var oldPosition = $em.css('position');
$em.css('position', 'absolute');
var width = $em.width();
$em.css('position', oldPosition);
return width;
}
return this.each(function(){
var $this = $(this);
var $parent = $this.parent();
var prevFontSize;
while (checkWidth($this) > $parent.width()) {
var currentFontSize = parseInt($this.css('font-size').replace('px', ''));
// Stop looping if min font size reached, or font size did not change last iteration.
if (isNaN(currentFontSize) || currentFontSize <= options.minFontSize ||
prevFontSize && prevFontSize == currentFontSize) {
break;
}
prevFontSize = currentFontSize;
$this.css('font-size', (currentFontSize - 1) + 'px');
}
});
};
})(jQuery);
CSS 변수 사용
아직 CSS 변수에 대해 언급 한 사람이 없으며이 접근 방식이 저에게 가장 적합했습니다.
페이지에 모바일 사용자 화면 너비의 100 %이지만 max-width800px 인 열이있어 데스크톱에서는 열의 양쪽에 약간의 공간 이 있다고 가정 해 보겠습니다 . 페이지 상단에 넣으십시오.
<script> document.documentElement.style.setProperty('--column-width', Math.min(window.innerWidth, 800)+'px'); </script>
이제 기본 제공 vw단위 대신 해당 변수를 사용 하여 글꼴 크기를 설정할 수 있습니다. 예
p {
font-size: calc( var(--column-width) / 100 );
}
그것은 아니다 순수 CSS 방식,하지만 아주 가까이 있습니다.
내 코드를보세요. 그것은 거기 font size smaller에 fit무엇이든 만듭니다 .
하지만 이것이 좋은 사용자 경험으로 이어지지는 않는다고 생각합니다.
var containerWidth = $("#ui-id-2").width();
var items = $(".quickSearchAutocomplete .ui-menu-item");
var fontSize = 16;
items.each(function(){
// Displaying a value depends sometimes on your case. You may make it block or inline-table instead of inline-block or whatever value that make the div take overflow width.
$(this).css({"whiteSpace": "nowrap", "display": "inline-block"});
while ($(this).width() > containerWidth){
console.log("$(this).width()" + $(this).width() + "containerWidth" + containerWidth)
$(this).css("font-size", fontSize -= 0.5);
}
});
뷰포트 크기가이 문제의 해결책이 아니므로 fitText 플러그인을 사용해보십시오 .
라이브러리를 추가하기 만하면됩니다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
텍스트 계수를 설정하여 올바른 글꼴 크기를 변경합니다.
$("#text_div").fitText(0.8);
텍스트의 최대 값과 최소값을 설정할 수 있습니다.
$("#text_div").fitText(0.8, { minFontSize: '12px', maxFontSize: '36px' });
JavaScript 폴백 (또는 유일한 솔루션) 으로 옵션 을 전달하여 상위 요소 (컨테이너)를 기준으로 확장 할 수있는 jQuery Scalem 플러그인 을 사용할 수 있습니다 reference.
누구에게나 도움이되는 경우이 스레드의 대부분의 솔루션은 텍스트를 여러 줄 (e 형식)로 래핑했습니다.
그러나 나는 이것을 발견했고 작동했습니다.
https://github.com/chunksnbits/jquery-quickfit
사용 예 :
$('.someText').quickfit({max:50,tolerance:.4})
항상 다음 속성을 가진 요소 가 있어야합니다 .
자바 스크립트 : element.style.fontSize = "100%";
또는
CSS : style = "font-size: 100%;"
전체 화면으로 이동하면 이미 계산 된 척도 변수 가 있어야합니다 (척도> 1 또는 척도 = 1). 그런 다음 전체 화면에서 :
document.body.style.fontSize = (scale * 100) + "%";
약간의 코드로 잘 작동합니다.
동적 텍스트의 경우이 플러그인이 매우 유용합니다.
http://freqdec.github.io/slabText/
CSS를 추가하기 만하면됩니다.
.slabtexted .slabtext
{
display: -moz-inline-box;
display: inline-block;
white-space: nowrap;
}
.slabtextinactive .slabtext
{
display: inline;
white-space: normal;
font-size: 1em !important;
letter-spacing: inherit !important;
word-spacing: inherit !important;
*letter-spacing: normal !important;
*word-spacing: normal !important;
}
.slabtextdone .slabtext
{
display: block;
}
그리고 스크립트 :
$('#mydiv').slabText();
이것은 나를 위해 일했습니다.
나는`font-size : 10px` 설정에서 얻은 너비 / 높이를 기준으로 대략적인 글꼴 크기를 시도합니다. 기본적으로 아이디어는 "만약 내가 'font-size : 10px'를 사용하여 너비가 20 픽셀이고 높이가 11 픽셀 인 경우 너비가 50 픽셀이고 높이가 30 픽셀 인 컨테이너를 계산하기위한 최대 글꼴 크기는 얼마일까요?"입니다.
답은 이중 비율 시스템입니다.
{20 : 10 = 50 : X, 11 : 10 = 30 : Y} = {X = (10 * 50) / 20, Y = (10 * 30) / 11}
이제 X는 너비와 일치하는 글꼴 크기이고 Y는 높이와 일치하는 글꼴 크기입니다. 가장 작은 가치를 취하다
function getMaxFontSizeApprox(el){
var fontSize = 10;
var p = el.parentNode;
var parent_h = p.offsetHeight ? p.offsetHeight : p.style.pixelHeight;
if(!parent_h)
parent_h = 0;
var parent_w = p.offsetHeight ? p.offsetWidth : p.style.pixelWidth;
if(!parent_w)
parent_w = 0;
el.style.fontSize = fontSize + "px";
var el_h = el.offsetHeight ? el.offsetHeight : el.style.pixelHeight;
if(!el_h)
el_h = 0;
var el_w = el.offsetHeight ? el.offsetWidth : el.style.pixelWidth;
if(!el_w)
el_w = 0;
// 0.5 is the error on the measure that JavaScript does
// if the real measure had been 12.49 px => JavaScript would have said 12px
// so we think about the worst case when could have, we add 0.5 to
// compensate the round error
var fs1 = (fontSize*(parent_w + 0.5))/(el_w + 0.5);
var fs2 = (fontSize*(parent_h) + 0.5)/(el_h + 0.5);
fontSize = Math.floor(Math.min(fs1,fs2));
el.style.fontSize = fontSize + "px";
return fontSize;
}
주의 : 함수의 인수는 범위 요소이거나 부모보다 작은 요소 여야합니다. 그렇지 않으면 자식과 부모가 모두 동일한 너비 / 높이 함수를 가질 경우 실패합니다.
CSS 플렉스 속성에 대한 답변은 없지만 매우 유용 할 수 있습니다.
글꼴 크기를 창이 아닌 컨테이너에 맞추려면 resizeFont()이 질문에서 공유 한 기능을 참조하십시오 (대부분 이미 여기에 링크 된 다른 답변의 조합). 를 사용하여 트리거됩니다 window.addEventListener('resize', resizeFont);.
Vanilla JavaScript : 컨테이너에 맞게 글꼴 크기 조정
자바 스크립트 :
function resizeFont() {
var elements = document.getElementsByClassName('resize');
console.log(elements);
if (elements.length < 0) {
return;
}
_len = elements.length;
for (_i = 0; _i < _len; _i++) {
var el = elements[_i];
el.style.fontSize = "100%";
for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {
el.style.fontSize = size + '%';
}
}
}
vw / vh를 폴백으로 사용할 수 있으므로 JavaScript를 사용하여 동적으로 em또는 rem단위를 할당 하여 JavaScript가 비활성화 된 경우 글꼴이 창에 맞게 조정되도록합니다.
.resize크기를 조정할 텍스트가 포함 된 모든 요소에 클래스를 적용합니다 .
창 크기 조정 이벤트 리스너를 추가하기 전에 함수를 트리거하십시오. 그런 다음 컨테이너에 맞지 않는 텍스트는 페이지가로드 될 때와 크기가 조정될 때 축소됩니다.
참고 : 기본은 font-size로 설정해야합니다 em, rem또는 %적절한 결과를 얻을 수 있습니다.
HTML
<div style="height:100px; width:200px;">
<div id='qwe'>
test
</div>
</div>
글꼴 크기를 최대화하기위한 JavaScript 코드 :
el = document.getElementById('qwe');
maxFontPixels = 50;
maxHeight = el.parentElement.offsetHeight;
fontSize = Number(maxFontPixels || maxHeight);
el.style.width = '100%';
el.style.overflowWrap = 'break-word';
var minFS = 3, maxFS = fontSize;
while (fontSize != minFS) {
el.style.fontSize = `${fontSize}px`;
if (el.offsetHeight < maxHeight) {
minFS = fontSize;
}
else {
maxFS = fontSize;
}
fontSize = Math.floor((minFS + maxFS)/2);
}
el.style.fontSize = `${minFS}px`;
곧바로 미디어 쿼리는 동적 일 수있는 컨테이너 크기를 기반으로 글꼴 크기를 조정하는 훨씬 간단하고 이해하기 쉬운 솔루션처럼 보입니다.
아래는 컨테이너가 뷰포트의 크기로 조정되었는지 또는 최대 값에 도달했는지에 관계없이 컨테이너의 크기에 맞게 글꼴 크기를 조정합니다. 너비가 100 %가 아닌 컨테이너가있는 경우 vw그에 따라 조정할 수 있습니다.
.container {
width: 100%;
max-width: 600px;
}
.headline {
font-size: 20vw;
}
.subhead {
font-size: 5vw;
}
@media (min-width:600px) {
.headline {
font-size: 120px;
}
.subhead {
font-size: 32px;
}
}
참고 URL : https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container
'your programing' 카테고리의 다른 글
| jQuery의 jquery-1.10.2.min.map이 404 (찾을 수 없음)를 트리거합니다. (0) | 2020.09.27 |
|---|---|
| SQL Server에 테이블이 있는지 확인 (0) | 2020.09.27 |
| 같은 브랜치에있는 두 개의 다른 커밋간에 같은 파일을 어떻게 비교합니까? (0) | 2020.09.27 |
| AngularJS의 지시문 범위에서 '@'와 '='의 차이점은 무엇입니까? (0) | 2020.09.27 |
| jQuery 드롭 다운에서 선택한 옵션 가져 오기 (0) | 2020.09.27 |