동적 문자 수에 따라 글꼴 크기를 반응 적으로 만드는 순수 CSS

동적 문자 수에 따라 글꼴 크기를 반응 적으로 만드는 순수 CSS

---

나는 이것이 자바 스크립트로 상당히 쉽게 해결할 수 있다는 것을 알고 있지만 순수한 CSS 솔루션에만 관심이 있습니다.

텍스트가 항상 고정 된 div에 맞도록 동적으로 텍스트 크기를 조정하는 방법을 원합니다. 다음은 샘플 마크 업입니다.

<div style="width: 200px; height: 1em; overflow: hidden;">
  <p>Some sample dynamic amount of text here</p>
</div>

컨테이너의 너비를 ems로 지정하고 글꼴 크기를 가져와 해당 값을 상속함으로써 이것이 가능할 수 있다고 생각했습니다.

---

방금 VW 장치를 사용하여 이것이 가능하다는 것을 알았습니다. 뷰포트 너비 설정과 관련된 단위입니다. 레거시 브라우저 지원 부족과 같은 몇 가지 단점이 있지만 사용을 진지하게 고려해야 할 사항입니다. 또한 다음과 같이 이전 브라우저에 대체를 제공 할 수 있습니다.

p {
    font-size: 30px;
    font-size: 3.5vw;
}

http://css-tricks.com/viewport-sized-typography/ 및 https://medium.com/design-ux/66bddb327bb1

---

CSS3 는 뷰 포트와 관련된 새로운 차원을 지원합니다. 그러나 이것은 안드로이드 <4.4에서 작동하지 않습니다

1. 3.2vw = 뷰포트 너비의 3.2 %
2. 3.2vh = 뷰포트 높이의 3.2 %
3. 3.2vmin = 3.2vw 또는 3.2vh보다 작음

4. 3.2vmax = 더 큰 3.2vw 또는 3.2vh

   body
   {
       font-size: 3.2vw;
   }
   

css-tricks.com / .... 및 caniuse.com / ...을 참조하십시오 .

또는

미디어 쿼리 사용. 가장 간단한 방법은 치수를 % 또는 em으로 사용하는 것입니다. 기본 글꼴 크기 만 변경하면 모든 것이 변경됩니다.

@media (max-width: @screen-xs) {
    body{font-size: 10px;}
}

@media (max-width: @screen-sm) {
    body{font-size: 14px;}
}


h5{
    font-size: 1.4em;
}

치수를 % 또는 em로 사용하십시오 . 기본 글꼴 크기 만 변경하면 모든 것이 변경됩니다. 이전 버전에서는 매번 h1이 아닌 body 글꼴을 변경하거나 기본 글꼴 크기를 장치의 기본값으로 설정하고 모두 em

em, px 및 %에 대한 자세한 내용은 kyleschaeffer.com / .... 을 참조하십시오 .

---

calc접근 방식에 관심이있을 수 있습니다 .

font-size: calc(4vw + 4vh + 2vmin);

끝난. 취향에 맞게 값을 조정하십시오.

출처 : https://codepen.io/CrocoDillon/pen/fBJxu

---

I know I'm ressurecting a long dead question, but I had the same question and I wanted to add something. Please don't ban me for this, I felt it was important enough to justify this answer, I'll delete if required. @Joseph Silber is wrong, coding all the possibilities actually is a viable way to do this. The reason is because there actually aren't infinite possibilities. Well, technically there are, but 99% of your visitors will be using a standard resolution. This is doubly true for mobile (the main reason for responsive web design) because most mobile OSes run apps full screen with no window resizing.

또한 스크롤 막대로 인해 높이는 거의 관련이 없습니다 (1, 4, 5 피트 이상인 웹 페이지는 즉시 떠날 수 있지만 대부분은 사실입니다). 너비 만 걱정하면됩니다. 그리고 실제로 코딩해야 할 너비는 240, 320, 480 (이전 iThings의 경우), 640, 800, 1024, 1280, 1440, 1600, 1920, 2048, 2560입니다. 4k, 이미지가 너무 부풀어 오르고 100 % 너비로 뻗어있는 2560 크기가 4k 모니터에서 잘 보입니다 (테스트했습니다). 또한 이전 포스터가 제안한대로 720 (720x480)을 신경 쓰지 마십시오. 디지털 카메라에서 거의 독점적으로 사용되는 해상도이며 매우 드문 경우입니다.

누군가가 이국적인 해상도를 사용하고 있다면 지난 15 년 동안 만들어진 거의 모든 렌더러가 반올림되므로 누군가의 화면 너비가 맞다면 말입니다. 1100, 1024 CSS 규칙을로드 할 예정이므로 사이트가 중단되지 않아야합니다. 이것은 반응 형 규칙을 불필요하게 만들려고 시도하여 이국적인 해상도를 계산하게하며, 누군가가 웹 브라우저를 너무 오래 사용하여 사이트를로드하지 않는 한 모든 가능한 설정을 픽셀 단위로 코딩해야한다는 생각은 어리 석습니다. 어쨌든.

---

유일한 방법은 다른 화면 크기에 대해 다른 너비를 설정하는 것이지만이 방법은 매우 정확하지 않으므로 js 솔루션을 사용해야합니다.

h1 {
    font-size: 20px;
}

@media all and (max-device-width: 720px){
    h1 {
        font-size: 18px;
    }
}

@media all and (max-device-width: 640px){
    h1 {
        font-size: 16px;
    }
}

@media all and (max-device-width: 320px){
    h1 {
        font-size: 12px;
    }
}

---

참고로 컨테이너 내의 텍스트 길이에 따라 글꼴 크기를 조정하는 JS 솔루션이 있습니다.

약간 수정 된 코드가 있지만 다음과 같은 아이디어가있는 코드 펜 :

function scaleFontSize(element) {
    var container = document.getElementById(element);

    // We only want to scale down long text, so first we reset
    // font-size to 100%, in case this function is called multiple times.
    container.style.fontSize = "100%";

    // Now actually check if the text is wider than
    // its container, if so then reduce font-size
    if (container.scrollWidth > container.clientWidth) {
        container.style.fontSize = "70%";
    }
}

나를 위해 사용자가 드롭 다운에서 선택하면 메뉴의 div가 채워집니다 (이곳에서 동적 텍스트가 발생합니다).

    scaleFontSize("my_container_div");

또한 CSS 줄임표 ( "...")를 사용하여 더 긴 텍스트도 자릅니다 .

#my_container_div {
    width: 200px; /* width required for text-overflow to work */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

따라서 궁극적으로 :

• 짧은 텍스트 : 예 : "APPLES"

  완전히 렌더링되고 멋진 큰 글자.

• 긴 텍스트 : 예 : "애플 및 오렌지"

  위의 JS 스케일링 기능을 통해 70 % 축소됩니다.

• 매우 긴 텍스트 : 예 : "APPLES & ORANGES & BANAN ..."

  CSS 규칙과 함께 위의 JS 스케일링 기능을 통해 70 % 축소되고 "..."타원으로 잘립니다.

CSS 문자 간격을 사용하여 재생하면서 같은 글꼴 크기를 유지하면서 텍스트를 축소 할 수도 있습니다.

---

많은 사람들이 @DMTinter의 게시물에 대한 의견에서 언급했듯이 OP는 문자 수 ( "양")에 대해 묻고있었습니다. 그는 CSS에 대해서도 질문했지만 @Alexander가 지적했듯이 "CSS로는 불가능합니다". 내가 알 수있는 한, 그것은 현재로서는 사실처럼 보이므로 사람들이 다음으로 가장 좋은 것을 알고 싶어하는 것이 논리적 인 것처럼 보입니다.

나는 이것을 자랑스럽게 생각하지 않지만 작동합니다. 그것을 달성하기 위해 과도한 양의 코드처럼 보입니다. 이것이 핵심입니다 :

function fitText(el){
  var text = el.text();
  var fsize = parseInt(el.css('font-size'));
  var measured = measureText(text, fsize);

  if (measured.width > el.width()){
    console.log('reducing');
    while(true){
      fsize = parseInt(el.css('font-size'));
      var m = measureText(text, fsize );
      if(m.width > el.width()){
        el.css('font-size', --fsize + 'px');
      }
      else{
        break;
      }
    }
  }
  else if (measured.width < el.width()){
    console.log('increasing');
    while(true){
      fsize = parseInt(el.css('font-size'));
      var m = measureText(text, fsize);
      if(m.width < el.width()-4){ // not sure why -4 is needed (often)
        el.css('font-size', ++fsize + 'px');
      }
      else{
        break;
      }
    }
  }
}

여기 JS 빈은 다음과 같습니다 http://jsbin.com/pidavon/edit?html,css,js,console,output
(정말 텍스트를 측정하기 위해 캔버스를 사용에 관심이 아니에요 그것은 가능한 개선을 제안하십시오 ... 보인다 너무 많은 오버 헤드 (?)를 좋아하십시오.

measureText 함수를위한 @Pete에게 감사합니다 : https://stackoverflow.com/a/4032497/442665

---

이 솔루션은 또한 도움이 될 수 있습니다.

$(document).ready(function () {
    $(window).resize(function() {
        if ($(window).width() < 600) {
            $('body').css('font-size', '2.8vw' );
        } else if ($(window).width() >= 600 && $(window).width() < 750) {
            $('body').css('font-size', '2.4vw');
        } 
         // and so on... (according to our needs)
        } else if ($(window).width() >= 1200) {
            $('body').css('font-size', '1.2vw');
        }
    }); 
  });

그것은 나를 위해 잘 작동했습니다!

---

부트 스트랩에서 구현 될 MartijnCuppens의 RFS (응답 글꼴 크기) 라이브러리 를 사용해보십시오.

---

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

이 방정식을 사용하십시오.

1440 및 768보다 크거나 작은 경우 정적 값을 지정하거나 동일한 방법을 적용 할 수 있습니다.

vw 솔루션의 단점은 스케일 비율을 설정할 수 없다는 것입니다. 화면 해상도 1440에서 5vw가 60px 글꼴 크기, 아이디어 글꼴 크기로 끝날 수 있지만 창 너비를 768로 줄이면 끝날 수 있습니다. 원하는 최소값이 아닌 12px입니다. 이 방법을 사용하면 상한과 하한을 설정할 수 있으며 글꼴은 그 사이에서 확장됩니다.

---

안의 문자열 길이를 기준으로 글꼴 크기를 계산하는 조회 테이블을 만듭니다 <div>.

const fontSizeLookupTable = () => {
  // lookup table looks like: [ '72px', ..., '32px', ..., '16px', ..., ]
  let a = [];
  // adjust this based on how many characters you expect in your <div>
  a.length = 32;
  // adjust the following ranges empirically
  a.fill( '72px' ,     );
  a.fill( '32px' , 4 , );
  a.fill( '16px' , 8 , );
  // add more ranges as necessary
  return a;
}

const computeFontSize = stringLength => {
  const table = fontSizeLookupTable();
  return stringLength < table.length ? table[stringLength] : '16px';
}

경험적 테스트를 통해 모든 매개 변수를 조정하고 조정하십시오.

참고 URL : https://stackoverflow.com/questions/14431411/pure-css-to-make-font-size-responsive-based-on-dynamic-amount-of-characters