programing

용기 크기를 기준으로 글꼴 크기 조정

sourcejob 2023. 6. 3. 08:24

용기 크기를 기준으로 글꼴 크기 조정

글꼴 크기 조정을 이해하는 데 어려움을 겪고 있습니다.

있습니다.font-size하지만 100%가을 의미합니까하지만 100%?이것은 16픽셀로 계산되는 것처럼 보입니다.

저는 100%가 브라우저 창의 크기를 가리킬 것이라고 생각했지만, 윈도우가 모바일 너비로 크기가 조정되는지 아니면 전체 와이드 스크린 바탕 화면으로 조정되는지에 관계없이 항상 16픽셀이기 때문에 그렇지는 않습니다.

내 사이트의 텍스트를 컨테이너와 관련하여 축척으로 만들려면 어떻게 해야 합니까?사용해 보았습니다.em하지만 이것 또한 확장되지 않습니다.

제 추론은 제 메뉴와 같은 것들이 크기를 조정할 때 찌그러지기 때문에, 저는 그것을 줄여야 합니다.px font-size.menuItem (에서, 용의너관다예요중에서들소른된련기비, 큰화메뉴서에의면어들바탕를)22px완벽하게 작동합니다.하고 태릿너아래이로동하고로비블▁move▁width고이▁down하동▁tablet▁to▁and.16px더 적합합니다.)

중단점을 추가할 수는 있지만 텍스트를 확장하고 추가 중단점을 추가해야 합니다. 그렇지 않으면 텍스트를 제어하기 위해 너비가 100픽셀 감소할 때마다 수백 개의 중단점이 생깁니다.

컨테이너 쿼리는 사용 사례에 따라 모든 주요 브라우저에서 지원되는 가장 좋은 옵션입니다.지원 수준은 https://caniuse.com/mdn-css_properties_container 에서 확인할 수 있습니다.

이제 매우 쉽게 제어할 수 있습니다.

.module h2 {
  font-size: 1em;
  container-name: sidebar
}

@container sidebar (min-width: 700px) {
  .module h2 {
    font-size: 2em;
  }
}

자세한 내용은 컨테이너 쿼리에 대한 MDN 기사를 참조하십시오. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

달성할 수 있는 작업의 추가 예: https://css-tricks.com/a-few-times-container-size-queries-would-have-helped-me-out/

=========================

구답

컨테이너가 본문이 아닌 경우 CSS Tricks는 텍스트를 컨테이너에 고정하는 모든 옵션을 다룹니다.

컨테이너가 본문인 경우 찾는 항목은 Viewport-% 길이입니다.

뷰포트 백분율 길이는 초기 포함 블록의 크기에 상대적입니다.초기 포함 블록의 높이 또는 너비가 변경되면 그에 따라 크기가 조정됩니다.그러나 루트 요소의 오버플로 값이 자동인 경우 스크롤 막대는 존재하지 않는 것으로 간주됩니다.

값은 다음과 같습니다.

vw의 %)(뷰포트 너비의 %)
vh의 %)(뷰포트 높이의 %)
vi요소의 축 뷰포트 크기의 1%)
vb요소의 축 루요소블축록뷰크방서기의포트에의 1%)
vmin (보다작은)은)vw또는vh)
vmax 것 또는 (큰 것)vw또는vh)

1v*는 초기 포함 블록의 1%와 동일합니다.

사용 방법은 다음과 같습니다.

p {
    font-size: 4vw;
}

것처럼 뷰포트 너비도 .font-size미디어 쿼리를 사용할 필요가 없습니다.

은 이값은사단니다입위와 입니다. 마치px또는em따라서 너비, 여백 또는 패딩과 같은 다른 요소의 크기를 조정하는 데도 사용할 수 있습니다.

브라우저 지원은 매우 좋지만 다음과 같은 대체 기능이 필요할 수 있습니다.

p {
    font-size: 16px;
    font-size: 4vw;
}

지원 통계를 확인하십시오. http://caniuse.com/ #viewport=viewport-messages.

또한 CSS-Tricks를 확인하여 더 넓은 범위를 확인하십시오.뷰포트 크기 타이포그래피

다음은 최소/최대 크기를 설정하고 크기를 좀 더 제어하는 방법에 대한 좋은 기사입니다. 응답성이 높은 타이포그래피를 정밀하게 제어할 수 있습니다.

다음은 텍스트가 뷰포트를 채우도록 calc()을 사용하여 크기를 설정하는 방법에 대한 기사입니다. http://codepen.io/CrocoDillon/pen/fBJxu

또한, '몰트 리딩'이라는 기술을 사용하여 선 높이를 조정하는 이 기사를 참조하십시오.CSS에서 용융 유도

그러나 컨테이너가 뷰포트(본체)가 아닌 경우에는 어떻게 해야 합니까?

이 질문은 2507rkt3의 답변 아래 Alex의 댓글에 있습니다.

그 사실이 의미하는 것은 아닙니다.vw해당 컨테이너의 크기에 어느 정도 사용할 수 없습니다.이제 모든 변화를 보려면 용기가 어떤 식으로든 크기가 유연하다고 가정해야 합니다.직접적인 백분율을 통해서인지 여부width또는 100% 마이너스 마진을 통해. "되어 있으면 됩니다.를 들어, "moot"으로 설정되어 포인트가 됩니다.200px 드그그--럼냥이와 a.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 [i.e. 50%])
    */
    font-size: 2.5vw;
}

서 여서가정때할을 가정하면,div의 입니다.body,그렇다.50% 그중서의100%너비, 즉 이 기본적인 경우 뷰포트 크기입니다.기적으다설니다합정음을로본을 하려고 합니다.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 [i.e. 150%]) * .5 [i.e. 50%]
    */
    font-size: 3.75vw;
}

크기 조정은 여전히 뷰포트를 기반으로 하지만 본질적으로 컨테이너 크기 자체를 기반으로 설정됩니다.

용기 크기가 동적으로 변경되는 경우...

컨테이너 요소의 크기가 다음을 통해 해당 비율 관계를 동적으로 변경하는 경우@media중단점 또는 JavaScript를 통해 기본 "대상"이 무엇이든 간에 텍스트 크기 조정을 위한 동일한 "관계"를 유지하기 위해 재계산이 필요합니다.

위의 #1 예를 들어보겠습니다.에 약에만.div로 전환되었습니다.25%어느 한 쪽의 폭.@media JavaScript,또는자크트립스, 동에시고바그리리동,에▁or,font-size를 통해 새로운 .5vw * .25 = 1.25이렇게 하면 텍스트 크기가 원본의 "폭"과 동일한 크기가 됩니다.50%컨테이너는 뷰포트 크기 조정에서 절반으로 줄었지만 현재 자체 백분율 계산의 변경으로 인해 감소했습니다.

도전

CSS 기능을 사용하면 동적으로 조정하기가 어려워집니다. 그 기능은 다음에 대해 작동하지 않기 때문입니다.font-size현시점에서의 목적그래서 당신의 폭이 변하고 있다면 당신은 순수한 CSS 조정을 할 수 없습니다.calc()물론, 마진에 대한 폭의 작은 조정은 어떠한 변화도 보증하기에 충분하지 않을 수 있습니다.font-size문제가 되지 않을 수도 있습니다.

SVG를 사용한 솔루션:

.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>

를 및 SVG를 사용한 `foreignObject`:

.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>

CSS 컨테이너 쿼리

2022년 후반에 CSS 기능 세트에 추가되어 컨테이너로 글꼴 크기를 쉽게 조정할 수 있습니다.

단위 됩니다.cqw/cqh(쿼리 너비/높이 지정).이러한 기능을 사용하려면 다음을 설정해야 합니다.container-type크기를 사용할 부모 요소의 속성(직접 부모일 필요는 없음).최소 예제:

<div>
  <p>Lorem ipsum dolor sit amet</p>
</div>

<style>
  div {
    container-type: inline-size;
  }
  p {
    font-size: 5cqw;
  }
</style>

용기가 커짐에 따라 글꼴 크기가 부드럽게 증가합니다.에서 1000px는p는 꼴크기는이 됩니다.1000px / 100 * 5 = 50px.

container-type수 있습니다.size또는inline-size.size할 수 .cqw그리고.cqh대부분의 경우 웹에서 높이는 콘텐츠를 기준으로 계산되며 사용자는 너비만 지정합니다.브라우저 작업을 저장하기 위해 일반적으로 설정할 수 있습니다.container-type: inline-size;따라서 브라우저는 일반적으로 너비인 인라인 치수만 추적합니다(수직으로 설정하지 않은 경우).

컨테이너 쿼리에 대한 브라우저 지원은 2022년 하반기에 빠르게 성장하여 현재 75%에 달합니다(2023-01-01).업데이트: 현재 83%(2023-04-03)입니다.

프로젝트 중 하나에서 vw와 vh 사이의 "혼합"을 사용하여 필요에 따라 글꼴 크기를 조정합니다. 예:

font-size: calc(3vw + 3vh);

이것이 OP의 질문에 답하지 않는다는 것을 알지만, 아마도 다른 누구에게도 해결책이 될 수 있습니다.

를 포함한 순수-CSS 솔루션`calc()`와 산술 CSS는 다음과 .

이것은 정확히 OP가 요구하는 것이 아니라 누군가의 하루를 만들 수 있습니다.이 답은 쉽게 얻을 수 없으며 개발자 측에서 약간의 조사가 필요합니다.

저는 마침내 이것을 위한 순수-CSS 솔루션을 얻기 위해 왔습니다.calc()다른 단위로.당신의 표현식을 풀기 위해서는 공식에 대한 기본적인 수학적 이해가 필요할 것입니다.calc().

제가 이 문제를 해결했을 때, 저는 DOM에 있는 몇몇 부모들을 패딩 처리한 전체 페이지 너비의 응답 헤더를 얻어야 했습니다.여기서 제 가치관을 사용하겠습니다. 당신의 가치관으로 대체합니다.

수학으로

다음이 필요합니다.

일부 뷰포트에서 비율이 잘 조정되었습니다.320픽셀을 사용하여 24픽셀의 높이와 224픽셀의 폭을 얻었기 때문에 비율이 9.333...또는 28 / 3
내가 가지고 있던 컨테이너 폭.padding: 3em으로 해서 ▁got▁to▁and이은것▁this.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를 수정하는 것이 불가능할 것이라고 말하고 있습니다.요소를 조정하는 데 자바스크립트를 사용하는 것을 좋아하지 않기 때문에 더 파고들지 않고 자바스크립트(그리고 jQuery) 답변을 받아들이지 않습니다.전반적으로, 이것이 발견된 것은 좋은 일이며, 이것은 웹사이트 디자인에서 순수한 CSS 구현을 위한 한 단계입니다.

제 텍스트에 특이한 관례가 있어서 죄송합니다. 저는 영어 원어민이 아니며 스택 오버플로 답변을 작성하는 것도 꽤 처음입니다.

또한 일부 브라우저에는 사악한 스크롤바가 있습니다.를 들어,할 때, 는 "firefox", "firefox"를 했습니다.100vw스크롤 막대 아래로 확장되는 뷰포트의 전체 너비를 의미합니다(내용을 확장할 수 없음!). 따라서 전체 너비 텍스트를 주의 깊게 경계해야 하며 가급적이면 많은 브라우저와 장치에서 테스트해야 합니다.

이 문제에 대한 큰 철학이 있습니다.

글꼴 본문에 를 추천합니다). 장쉬운방특글크본지문것개다정입는니하에권(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예를 들어, 12픽셀의 글꼴 크기를 가진 요소.그리고 당신의 아이디어에 따르면, 300픽셀 너비의 컨테이너가 4픽셀 글꼴 크기로 될 것입니다.하한선이 있어야 합니다.

다른 솔루션은 다양한 너비의 글꼴을 설정할 수 있도록 미디어 쿼리를 사용하는 것입니다.

하지만 제가 추천하는 해결책은 그것을 도와주는 자바스크립트 라이브러리를 사용하는 것입니다.그리고 지금까지 찾은 text.js에 맞습니다.

기능은 다음과 같습니다.

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/

자바스크립트 없이 이것을 할 수 있는 방법이 있습니다!

인라인 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/page의 크기를 읽기 위해 듣기/루프(간격)하는 JavaScript 없이 글꼴을 부모의 직접 기능으로 사용하려면 방법이 있습니다.저는 꿈을 꾸죠.

iframe 내의 모든 항목은 iframe의 크기를 뷰포트의 크기로 간주합니다.즉, 가로 폭이 텍스트의 최대 너비이고 높이가 최대 높이 * 특정 텍스트의 가로 세로 비율과 같은 iframe을 만드는 것입니다.

뷰포트 단위가 텍스트 부모 단위와 함께 제공될 수 없다는 한계는 차치하고(% 크기가 다른 모든 사람처럼 동작하는 경우처럼) 뷰포트 단위는 매우 강력한 도구를 제공합니다. 즉, 최소/최대 차원을 얻을 수 있습니다.다른 곳에서는 그럴 수 없어요. 그렇다고 할 수 없어요.이 div의 높이를 부모의 너비로 * 무언가로 만듭니다.

즉, vmin을 사용하여 iframe 크기를 설정하여 높이가 제한 치수일 때 [fraction] * 총 높이가 좋은 글꼴 크기가 되도록 하고, 너비가 제한 치수일 때 [fraction] * 총 너비가 되도록 하는 것이 요령입니다.이것이 높이가 너비와 가로 세로 비율의 곱이어야 하는 이유입니다.

나의 특별한 예로, 당신은.

.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 규칙을 가져오는 작은 함수를 작성할 수 있습니다.

사이클링/자바스크립트를 사용하지 않고는 다른 방법을 생각할 수 없습니다.실제 솔루션은 브라우저가 상위 컨테이너의 함수로 텍스트를 확장하고 동일한 vmin/vmax 유형의 기능을 제공하는 것입니다.

JSFidle: https://jsfiddle.net/0jr7rrgm/3/ (빨간색 사각형을 마우스에 잠그려면 한 번 클릭하고, 해제하려면 다시 클릭)

피들에 있는 자바스크립트의 대부분은 나의 맞춤형 클릭 드래그 기능입니다.

CSS 변수 사용

아직 아무도 CSS 변수를 언급하지 않았고, 이 접근 방식이 저에게 가장 효과적이었습니다.

사용자 너비의 이지만 100% 사용자 화면 너비의 max-width800인치의 공간이 바탕 화면에 있습니다. 기둥의 양쪽에 약간의 공간이 있습니다.페이지 맨 위에 표시합니다.

<script> document.documentElement.style.setProperty('--column-width', Math.min(window.innerWidth, 800)+'px'); </script>

그리고 는 그 되어 있는 변수 )를 할 수 .vw 글꼴 크기를 합니다.) 예를 들어 예를 들어, 글꼴 를 설정합니다.

p {
  font-size: calc( var(--column-width) / 100 );
}

이것은 순수한 CSS 접근법은 아니지만, 꽤 가깝습니다.

용사를 합니다.vw,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씩 증가하기 시작합니다.

제이에스아이들

100%는 기본 글꼴 크기에 상대적이며, 설정하지 않은 경우 브라우저의 사용자 에이전트 기본값이 됩니다.

당신이 원하는 효과를 얻기 위해, 저는 자바스크립트 코드 한 조각을 사용하여 창 치수에 상대적인 기본 글꼴 크기를 조정할 것입니다.

예술적으로 문자 수에 관계없이 두 줄 이상의 텍스트를 동일한 너비 내에 맞춰야 하는 경우 좋은 옵션을 사용할 수 있습니다.

동적 솔루션을 찾는 것이 가장 좋습니다. 그러면 어떤 텍스트가 입력되든 좋은 디스플레이가 됩니다.

우리가 어떻게 접근할지 봅시다.

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"))첫 번째 줄의 )을 기준으로 한 다음 그에 따라 후속 줄의 글꼴 크기를 계산합니다.

이 웹 구성요소는 내부 텍스트 너비가 컨테이너 너비와 일치하도록 글꼴 크기를 변경합니다.데모를 확인합니다.

다음과 같이 사용할 수 있습니다.

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

은 아마도과 같은 입니다: 당은다음같것찾있을것다입니을고은.

http://jsfiddle.net/sijav/dGsC9/4/
http://fiddle.jshell.net/sijav/dGsC9/4/show/

저는 flowtype을 사용했고, 그것은 잘 작동합니다(그러나 그것은 순수한 CSS 솔루션이 아닌 자바스크립트입니다).

$('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

당신의 CSS 안에서, 당신의 디자인이 깨지기 시작할 때마다 320 픽셀 폭을 변경하는 이것을 아래에 추가해 보세요:

@media only screen and (max-width: 320px) {
  body { font-size: 1em; }
}

그런 다음 글꼴 크기를 원하는 대로 "px" 또는 "em"으로 지정합니다.

http://simplefocus.com/flowtype/ 을 사용해 보십시오.이것이 제가 제 사이트에 사용하는 것이고, 완벽하게 작동했습니다.

저만의 솔루션인 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;
};

문제는 비슷했지만 제목 내 텍스트 크기 조정과 관련이 있었습니다.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);

Viewport 크기가 이 문제의 해결책이 아니기 때문에 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' });

중단점이 필요하다는 것을 인정하면서도 텍스트 스케일링을 원한다는 것을 이해하는 순수한 CSS 솔루션은 다음과 같습니다.

중단점을 추가할 수는 있지만 텍스트를 확장하고 추가 중단점을 추가했으면 합니다. 그렇지 않으면...

다음은 다음을 사용하는 접근 방식입니다.

사용자 지정 속성
중단점에 대한 미디어 쿼리
clamp() (2022년 2월의 브라우저 지원은 93%로 상당히 양호합니다.
calc()

하나의 공통 스케일링 계수를 사용하여 화면당 컨테이너 내의 모든 텍스트 스케일링을 제어할 수 있는 경우max-width를 용자지 크의기조됩하니다면만기에 따라 .max-width이 요인을 1개의 계산에 적용합니다.

기본 설정은 다음과 같이 시작됩니다.

:root {
  --scaling-factor: 1
}

.parent {
  font-size: 30px
}

.largest {
  font-size: clamp(60%, calc(var(--scaling-factor) * 100%), 100%); 
}

.middle {
  font-size: clamp(60%, calc(var(--scaling-factor) * 85%), 100%); 
}

.smallest {
  font-size: clamp(60%, calc(var(--scaling-factor) * 70%), 100%); 
}

그런 다음 미디어 쿼리를 다음과 같이 중첩합니다(또는 중단점에 필요한 모든 것).

@media (max-width: 1200px) {
  :root {
    --scaling-factor: 0.9
  }
  @media (max-width: 800px) {
    :root {
      --scaling-factor: 0.8
    }
    @media (max-width: 600px) {
      :root {
        --scaling-factor: 0.5 /* nope, because the font-size is floored at 60% thanks to clamp() */
      }
    }
  }
}

이렇게 하면 미디어 쿼리 마크업이 최소화됩니다.

이점

하나의 사용자 지정 속성이 모든 확장을 제어합니다...미디어 중단점당 여러 선언을 추가할 필요 없음
의 clamp()▁the▁▁on다▁a-▁lowerlimit▁sets니합설정에 하한을 설정합니다.font-size그래야 합니다, 그래서 당신은 당신의 텍스트가 결코 너무 작지 않다는 것을 보장합니다(여기서 바닥은 부모의 60%입니다).font-size)

데모를 보려면 이 JSFidle을 참조하십시오.문단이 모두 동일할 때까지 창 크기 조정font-size.

요소는 항상 다음 속성을 사용해야 합니다.

자바스크립트:element.style.fontSize = "100%";

또는

CSS:style = "font-size: 100%;"

전체 화면으로 이동할 때 스케일 변수가 이미 계산되어 있어야 합니다(스케일 > 1 또는 스케일 = 1).그런 다음 전체 화면에서:

document.body.style.fontSize = (scale * 100) + "%";

코드가 거의 없어도 잘 작동합니다.

제 코드를 보세요.그것은 다음을 만듭니다.font size smallerfit거기에 무엇이든.

하지만 이것이 좋은 사용자 환경으로 이어지지는 않는다고 생각합니다.

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);
    }
});

이것은 저에게 효과가 있었습니다.

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;
}

NB: 함수의 인수는 스팬 요소 또는 부모 요소보다 작은 요소여야 합니다. 그렇지 않으면 자식 및 부모가 모두 동일한 너비/높이 함수를 가질 경우 실패합니다.

let textElement = document.getElementById('text1');
let parentElement = textElement.parentElement;
const parentClientHeight = parentElement.clientHeight;
const parentClientWidth = parentElement.clientWidth;
textElement.style.padding = "unset";
textElement.style.margin = "auto";
let fontSize = parentClientHeight;
let minFS = 3,
  maxFS = fontSize;
while (fontSize != minFS) {
  textElement.style.fontSize = `${fontSize}px`;
  if (
    parentElement.scrollHeight <= parentClientHeight &&
    parentElement.scrollWidth <= parentClientWidth
  ) {
    minFS = fontSize;
  } else {
    maxFS = fontSize;
  }
  fontSize = Math.floor((minFS + maxFS) / 2);
}
textElement.style.fontSize = `${minFS}px`;

<div style="height:200px; width:300px;">
  <div id='text1'>
    test
  </div>
</div>

JavaScript 폴백(또는 귀사의 유일한 솔루션)으로 myjQueryScalem 플러그인을 사용할 수 있습니다. 이 플러그인을 사용하면 상위 요소(컨테이너)에 대해reference선택.

만약 누군가에게 도움이 된다면, 이 스레드의 대부분의 솔루션은 텍스트를 여러 줄로 묶고 있었습니다.

그런데 이걸 발견했고, 효과가 있었습니다.

https://github.com/chunksnbits/jquery-quickfit

사용 예:

$('.someText').quickfit({max:50,tolerance:.4})

동적 텍스트의 경우 이 플러그인이 매우 유용합니다.

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();

언급URL : https://stackoverflow.com/questions/16056591/font-scaling-based-on-size-of-container

'programing' 카테고리의 다른 글

모듈에 중첩된 클래스 및 클래스를 사용해야 하는 경우 (0)	2023.06.03
호를 사용하여 세터 재정의 (0)	2023.06.03
WPF(MVVM):보기 모델에서 보기를 닫으시겠습니까? (0)	2023.05.29
"chore"를 커밋 메시지 유형으로 사용할 때는 언제입니까? (0)	2023.05.29
오류: Postgres를 사용하여 시퀀스 city_id_seq에 대한 사용 권한이 거부되었습니다. (0)	2023.05.29

현재글용기 크기를 기준으로 글꼴 크기 조정

각종 프로그래밍 정보를 다루는 블로그입니다.

reactjs, C, wordpress, json, php, Excel, angularJS, MariaDB, PowerShell, Spring-boot, javascript, Ajax, mysql, jQuery, Java, Oracle, vuejs2, vuex, Git, python,

Today :
Yesterday :

sourcejob

용기 크기를 기준으로 글꼴 크기 조정

용기 크기를 기준으로 글꼴 크기 조정

용기 크기가 동적으로 변경되는 경우...

SVG를 사용한 솔루션:

를 및 SVG를 사용한 `foreignObject`:

CSS 컨테이너 쿼리

를 포함한 순수-CSS 솔루션`calc()`와 산술 CSS는 다음과 .

수학으로

하지만 어떻게 작동할까요?

결론

HTML

CSS

CSS 변수 사용

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2025/12 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

용기 크기를 기준으로 글꼴 크기 조정

용기 크기를 기준으로 글꼴 크기 조정

용기 크기가 동적으로 변경되는 경우...

SVG를 사용한 솔루션:

를 및 SVG를 사용한 foreignObject:

CSS 컨테이너 쿼리

를 포함한 순수-CSS 솔루션calc()와 산술 CSS는 다음과 .

수학으로

하지만 어떻게 작동할까요?

결론

HTML

CSS

CSS 변수 사용

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바

를 및 SVG를 사용한 `foreignObject`:

를 포함한 순수-CSS 솔루션`calc()`와 산술 CSS는 다음과 .