질문자 :Francesca
글꼴 크기 조정에 대해 머리를 쓰는 데 어려움을 겪고 있습니다.
font-size
가 100%인 웹사이트가 있습니다. 그래도 100%? 이것은 16픽셀에서 계산되는 것 같습니다.
나는 100%가 어떻게든 브라우저 창의 크기를 의미한다는 인상을 받았지만, 창의 크기가 모바일 너비로 조정되든 완전한 와이드스크린 데스크탑으로 조정되든 항상 16픽셀이기 때문에 분명히 아닙니다.
컨테이너와 관련하여 내 사이트의 텍스트 크기를 조정하려면 어떻게 해야 합니까? 나는 em
사용해 보았지만 이것도 확장되지 않습니다.
내 추론은 크기를 조정할 때 내 메뉴와 같은 것이 찌그러지기 때문에 컨테이너 너비와 관련하여 다른 요소 중에서 px
font-size
를 .menuItem
(예를 들어, 큰 데스크탑의 메뉴에서는 22px
가 완벽하게 작동합니다. 태블릿 너비로 이동하면 16px
가 더 적합합니다.)
모든 100pixels 텍스트를 제어하는 폭 감소에 대한 그렇지 않으면, 나는 중단 점의 수백하게 될 겁니다, 제가 중단 점을 추가 할 수 있습니다 알고 있어요,하지만 난 정말 규모에 텍스트뿐만 아니라 가진 추가 중단 점을합니다.
편집: 컨테이너가 본문이 아닌 경우 CSS Tricks는 Fitting Text to a Container의 모든 옵션을 다룹니다.
컨테이너가 본문인 경우 찾고 있는 것은 Viewport-percentage lengths입니다 .
뷰포트 백분율 길이 는 초기 포함 블록 의 크기에 상대적입니다. 초기 포함 블록의 높이 또는 너비가 변경되면 그에 따라 크기가 조정됩니다. 그러나 루트 요소의 overflow 값이 auto이면 스크롤 막대가 존재하지 않는 것으로 간주됩니다.
값은 다음과 같습니다.
-
vw
(표시 영역 너비의 %) -
vh
(뷰포트 높이의 %) -
vi
(루트 요소의 인라인 축 방향으로 뷰포트 크기의 1%) -
vb
(루트 요소의 블록 축 방향으로 뷰포트 크기의 1%) -
vmin
vw
또는 vh
중 작은 값) -
vmax
(더 크거나 vw
또는 vh
)
1 v*는 초기 포함 블록의 1%와 같습니다.
사용하면 다음과 같습니다.
p { font-size: 4vw; }
보시다시피 뷰포트 너비가 증가하면 미디어 쿼리를 사용할 필요 없이 font-size
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의 용융 리드
2507rkt3그러나 컨테이너가 뷰포트(본문)가 아니면 어떻게 될까요?
이 질문은 허용된 답변 아래에 있는 Alex의 의견에 대한 질문입니다.
vw
를 해당 컨테이너의 크기에 어느 정도 사용할 수 없다는 것을 의미하지는 않습니다. 이제 모든 변형을 보려면 컨테이너가 어떤 방식으로든 크기가 유연하다고 가정해야 합니다. 직접 백분율 width
통해 또는 100% 마이너스 여백을 통해 여부. 200px
너비로 설정되어 있으면 포인트가 "무리"가 됩니다. 그런 다음 해당 너비에 font-size
실시예 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 [ie 50%]) */ font-size: 2.5vw; }
div
body
의 자식이라고 가정하면 이 기본 경우의 뷰포트 크기인 100%
너비의 50%
기본적으로 보기에 좋은 vw
위의 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 [ie 150%]) * .5 [ie 50%] */ font-size: 3.75vw; }
크기 조정은 여전히 뷰포트를 기반으로 하지만 본질적으로 컨테이너 크기 자체를 기반으로 설정됩니다.
컨테이너의 크기가 동적으로 변경되어야 하는지...
@media
중단점 또는 JavaScript를 통해 동적으로 백분율 관계를 변경한 경우 기본 "대상"이 무엇이든 간에 텍스트 크기 조정에 대해 동일한 "관계"를 유지하기 위해 재계산이 필요합니다.
위의 예 #1을 살펴보십시오. @media
또는 JavaScript에 의해 div
25%
너비로 전환된 경우 동시에 미디어 쿼리 또는 JavaScript에서 font-size
5vw * .25 = 1.25
의 새로운 계산에 맞게 조정해야 합니다. 50%
컨테이너의 "너비"가 뷰포트 크기에서 절반으로 줄어들었을 때와 동일한 크기로 텍스트 크기가 배치되지만 이제 자체 백분율 계산 변경으로 인해 축소되었습니다.
도전
CSS3 calc()
함수 font-size
목적으로 작동하지 않기 때문에 동적으로 조정하기가 어려워집니다. calc()
에서 변경되는 경우 순수한 CSS 3 조정을 수행할 수 없습니다. 물론 여백의 너비를 약간 조정하는 것만으로는 font-size
변경을 보증하기에 충분하지 않을 수 있으므로 중요하지 않을 수 있습니다.
ScottSSVG 솔루션:
.resizeme { resize: both; margin: 0; padding: 0; height: 75px; width: 500px; background-color: lightblue; overflow: hidden; }
<div class="resizeme"> <svg width="100%" height="100%" viewBox="0 0 500 75" preserveAspectRatio="xMinYMid meet" style="background-color:green" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <text x="0" y="75" font-size="75" fill="black" >█Resize This█</text> </svg> </div>
foreignObject
사용한 SVG 및 텍스트 래핑 솔루션:
.resizeme { resize: both; margin: 0; padding: 0; height: 200px; width: 500px; background-color: lightblue; overflow: hidden; }
<div class="resizeme"> <svg width="100%" height="100%" viewBox="0 0 500 200" preserveAspectRatio="xMinYMin meet" > <foreignObject width="100%" height="100%" xmlns="http://www.w3.org/1999/xhtml"> <div xmlns="http://www.w3.org/1999/xhtml" style="background-color:lightgreen;"> <h1>heading</h1> <p>Resize the blue box.</p> </div> </foreignObject> </svg> </div>
Dantio내 프로젝트 중 하나에서 vw와 vh 사이의 "혼합물"을 사용하여 글꼴 크기를 필요에 맞게 조정합니다. 예를 들면 다음과 같습니다.
font-size: calc(3vw + 3vh);
나는 이것이 OP의 질문에 대답하지 않는다는 것을 알고 있지만 아마도 다른 사람에게 해결책이 될 수 있습니다.
lsblsbcalc()
, CSS 단위 및 수학이 포함된 순수 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 구현을 위한 한 단계가 된 것이 좋습니다.
내 텍스트의 비정상적인 규칙에 대해 사과드립니다. 저는 영어가 모국어가 아니며 스택 오버플로 답변을 작성하는 데 매우 익숙하지 않습니다.
또한 일부 브라우저에는 악의적인 스크롤바가 있다는 점에 유의해야 합니다. 예를 들어, Firefox를 사용할 때 100vw
는 스크롤바 아래로 확장되는 뷰포트의 전체 너비를 의미하므로(콘텐츠를 확장할 수 없는 곳!) 전체 너비 텍스트는 신중하게 여백을 지정해야 하며 가급적 많은 브라우저와 장치에서 테스트하는 것이 좋습니다.
hegez이 문제에 대한 큰 철학이 있습니다.
가장 쉬운 방법은 body(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{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
요소가 있다고 가정해 보겠습니다. 그리고 4픽셀 글꼴 크기에서 300픽셀 너비의 컨테이너가 될 것이라는 귀하의 아이디어에 따라. 하한선이 있어야 합니다.
다른 솔루션은 미디어 쿼리를 사용하는 것이므로 다른 너비에 대한 글꼴을 설정할 수 있습니다.
하지만 제가 추천하는 솔루션은 이를 도와주는 JavaScript 라이브러리를 사용하는 것입니다. 그리고 지금까지 찾은 fittext.js.
Dan Ovidiu Boncut기능은 다음과 같습니다.
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/
tnt-roxJavaScript 없이 이것을 할 수 있는 방법이 있습니다!
인라인 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/
user1816910이것은 매우 실용적이지 않을 수 있지만 div/page의 크기를 읽기 위해 수신/반복(간격)하는 JavaScript 없이 글꼴이 부모의 직접적인 기능이 되도록 하려면 방법이 있습니다. . 아이프레임.
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는 내 사용자 지정 클릭-끌기 기능입니다.
Roman Rekhlervw
, em
& co를 사용합니다. 확실히 작동하지만 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씩 증가하기 시작합니다.
JSFiddle
WoodrowShigeruCSS 변수 사용
아무도 아직 CSS 변수를 언급하지 않았으며 이 접근 방식이 저에게 가장 잘 맞았습니다.
페이지에 모바일 사용자 화면 너비의 100%인 열이 있지만 max-width
가 800px이므로 데스크톱에서는 열 양쪽에 공간이 있다고 가정해 보겠습니다. 페이지 상단에 다음을 입력하세요.
<script> document.documentElement.style.setProperty('--column-width', Math.min(window.innerWidth, 800)+'px'); </script>
vw
단위 대신 해당 변수를 사용하여 글꼴 크기를 설정할 수 있습니다. 예
p { font-size: calc( var(--column-width) / 100 ); }
순수한 CSS 접근 방식은 아니지만 꽤 가깝습니다.
user993683100%는 기본 글꼴 크기를 기준으로 하며 설정하지 않은 경우 브라우저의 사용자 에이전트 기본값이 됩니다.
원하는 효과를 얻으려면 JavaScript 코드를 사용하여 창 크기를 기준으로 기본 글꼴 크기를 조정합니다.
scoota269내 자체 솔루션인 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 (ie 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; };
Vincent예술적으로 문자 수에 관계없이 동일한 너비에 두 줄 이상의 텍스트를 맞춰야 하는 경우 좋은 옵션이 있습니다.
입력된 텍스트가 무엇이든 멋진 디스플레이가 되도록 동적 솔루션을 찾는 것이 가장 좋습니다.
어떻게 접근할 수 있는지 봅시다.
var els = document.querySelectorAll(".divtext"), refWidth = els[0].clientWidth, refFontSize = parseFloat(window.getComputedStyle(els[0],null) .getPropertyValue("font-size")); els.forEach((el,i) => el.style.fontSize = refFontSize * refWidth / els[i].clientWidth + "px")
#container { display: inline-block; background-color: black; padding: 0.6vw 1.2vw; } .divtext { display: table; color: white; font-family: impact; font-size: 4.5vw; }
<div id="container"> <div class="divtext">THIS IS JUST AN</div> <div class="divtext">EXAMPLE</div> <div class="divtext">TO SHOW YOU WHAT</div> <div class="divtext">YOU WANT</div> </div>
우리가 하는 일은 첫 번째 줄의 너비( els[0].clientWidth
)와 글꼴 크기( parseFloat(window.getComputedStyle(els[0],null).getPropertyValue("font-size"))
)를 다음과 같이 얻는 것입니다. 참조하고 그에 따라 후속 라인 글꼴 크기를 계산하십시오.
ReduCSS 내부에서 디자인이 깨지기 시작하는 모든 위치에 대해 320픽셀 너비를 변경하여 맨 아래에 추가해 보세요.
@media only screen and (max-width: 320px) { body { font-size: 1em; } }
그런 다음 원하는대로 "px"또는 "em"으로 글꼴 크기를 지정하십시오.
Chunky이 웹 구성 요소 는 내부 텍스트 너비가 컨테이너 너비와 일치하도록 글꼴 크기를 변경합니다. 데모를 확인하십시오.
다음과 같이 사용할 수 있습니다.
<full-width-text>Lorem Ipsum</full-width-text>
pomber당신은 다음과 같은 것을 찾고 있을지도 모릅니다:
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 });
Sijavfont-size 대신 CSS transform을 사용하여 간단한 scale 함수를 준비했습니다. 모든 컨테이너 내부에서 사용할 수 있으며 미디어 쿼리 등을 설정할 필요가 없습니다. :)
블로그 게시물: 전체 너비 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
Maciej Korsanhttp://simplefocus.com/flowtype/ 을 시도하십시오. 이것은 내가 내 사이트에 사용하는 것이며 완벽하게 작동했습니다.
Pixel Reaper내 문제는 비슷했지만 제목 내 텍스트 크기 조정과 관련이 있습니다. 글꼴 맞춤을 시도했지만 텍스트 흐름과 마찬가지로 약간 다른 문제를 해결하고 있었기 때문에 결과를 얻으려면 압축기를 토글해야 했습니다.
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);
Aram Kocharyan뷰포트 크기가 이 문제의 해결책이 아니기 때문에 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' });
krolovolk항상 다음 속성을 가진 요소를 사용하세요.
자바스크립트: element.style.fontSize = "100%";
또는
CSS: style = "font-size: 100%;"
전체 화면으로 전환하면 이미 척도 변수가 계산되어 있어야 합니다(척도 > 1 또는 척도 = 1). 그런 다음 전체 화면에서:
document.body.style.fontSize = (scale * 100) + "%";
작은 코드로 잘 작동합니다.
marirena내 코드를 살펴보세요. 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); } });
Basheer AL-MOMANI이것은 나를 위해 일했습니다.
'font-size: 10px' 설정에서 얻은 너비/높이를 기반으로 글꼴 크기를 근사화하려고 합니다. 기본적으로 아이디어는 "폭이 20픽셀이고 높이가 11픽셀이고 `글꼴 크기: 10픽셀'인 경우 너비가 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; }
주의: 함수의 인수는 스팬 요소이거나 부모보다 작은 요소여야 합니다. 그렇지 않으면 자식과 부모가 모두 동일한 너비/높이를 갖는 경우 함수가 실패합니다.
Maurizio RicciJavaScript 대체(또는 유일한 솔루션)로 jQuery Scalem 플러그인 reference
옵션을 전달하여 상위 요소(컨테이너)를 기준으로 확장할 수 있습니다.
thdoan누군가에게 도움이 되는 경우를 대비하여 이 스레드의 대부분의 솔루션은 텍스트를 여러 줄(예: e)로 래핑하는 것이었습니다.
그러나 나는 이것을 찾았고 효과가있었습니다.
https://github.com/chunksnbits/jquery-quickfit
사용 예:
$('.someText').quickfit({max:50,tolerance:.4})
pk1557동적 텍스트의 경우 이 플러그인이 매우 유용합니다.
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();
pajoukHTML
<div style="height:100px; width:200px;"> <div id='qwe'> test </div> </div>
글꼴 크기를 최대화하기 위한 JavaScript 코드:
var fontSize, maxHeight, maxWidth, textElement, parentElement; textElement = document.getElementById('qwe'); parentElement = textElement.parentElement; maxHeight = parentElement.clientHeight; maxWidth = parentElement.clientWidth; fontSize = maxHeight; var minFS = 3, maxFS = fontSize; while (fontSize != minFS) { textElement.style.fontSize = `${fontSize}px`; if (textElement.offsetHeight < maxHeight && textElement.offsetWidth <= maxWidth) { minFS = fontSize; } else{ maxFS = fontSize; } fontSize = Math.floor((minFS + maxFS)/2); } textElement.style.fontSize = `${minFS}px`;
Ramil GilfanovCSS flex 속성에 대한 답변은 없지만 매우 유용할 수도 있습니다.
Smart Coder글꼴 크기를 창 대신 컨테이너에 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를 폴백으로 사용할 수 있으므로 em
또는 rem
단위를 동적으로 할당하여 JavaScript가 비활성화된 경우 글꼴이 창에 맞게 조정되도록 합니다.
크기를 조정하려는 텍스트가 포함된 모든 요소에 .resize
클래스를 적용합니다.
창 크기 조정 이벤트 리스너를 추가하기 전에 함수를 트리거하십시오. 그런 다음 컨테이너에 맞지 않는 텍스트는 페이지가 로드될 때와 크기가 조정될 때 축소됩니다.
참고: 적절한 결과를 얻으려면 font-size
em
, rem
또는 %
로 설정해야 합니다.
Joshua Flood출처 : http:www.stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container