唯一的方法可能是为不同的屏幕大小设置不同的宽度，但这种方法是非常不准确的，你应该使用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;
    }
}

这个解决方案也可能有帮助:

$(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');
        }
    }); 
  });

这对我很有效!

正如许多人在@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 Bin: http://jsbin.com/pidavon/edit?html,css,js,console,output 请建议可能的改进(我不是真的对使用画布来测量文本感兴趣…看起来开销太大了(?))。

感谢@Pete的measureText函数: https://stackoverflow.com/a/4032497/442665

为什么不在服务器端根据字符数设置类呢?

    .NotMuchText {
        font-size: 20px;
    }

    .LotsOfText {
        font-size: 10px;
    }

我还想要一个非javascript解决方案，CSS解决方案，并诉诸于PHP/CSS解决方案。

因为公认的答案并不能真正解决问题，所以我基于jkrei0的答案在React中创建了一个解决方案。这将使动态文本根据其长度增长/收缩，就像在PowerPoint中一样。

这里是代码盒的链接:https://codesandbox.io/s/relaxed-rosalind-ielb8o

我从BootStrap某处获得了这个动态字体大小calc()，并调整了它以适应。基于4pt系统和rem https://www.finsweet.com/client-first/docs/sizes的Webflow项目:

html {font-size: 16px;}

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); body {font-family: 'Poppins', sans-serif;} /*---SETUP BASE SIZE ---*/ html {font-size: 16px;} /*---LINE-HEIGHTS + MARGINS---*/ [class^="display"], h1, h2, h3, h4 { margin-top: 0; margin-bottom: 1rem; font-weight: 600; } .display-1, .display-2, .display-3, .display-4 { line-height: 1.2; } h1, h2, h3, h4 { line-height: 1.4; } p, ul, ol { margin-bottom: 0.7rem; line-height: 1.45; } .lead { margin-bottom: 1rem; line-height: 1.4; } /*---FONT SIZES 1279px DOWN---*/ @media (max-width: 1279px) { .display-1 { font-size: calc(1.625rem + 4.5vw); } .display-2 { font-size: calc(1.575rem + 3.9vw); } .display-3 { font-size: calc(1.525rem + 3.3vw); } .display-4 { font-size: calc(1.475rem + 2.7vw); } /*---HEADINGS---*/ h1 { font-size: calc(1.375rem + 1.5vw); } h2 { font-size: calc(1.325rem + 0.9vw); } h3 { font-size: calc(1.3rem + 0.6vw); } h4 { font-size: calc(1.275rem + 0.3vw); } /*---PARAGRAPHS/UL/OL---*/ p, ul, ol { font-size: calc(0.823rem + 0.3vw); } .lead { font-size: calc(1.01rem + 0.3vw); } } /*---FONT SIZES ABOVE 1279px---*/ @media screen and (min-width: 1280px) { .display-1 { font-size: 5.22rem; } .display-2 { font-size: 4.7rem; } .display-3 { font-size: 4.16rem; } .display-4 { font-size: 3.63rem; } /*---HEADINGS---*/ h1 { font-size: 2.58rem; } h2 { font-size: 2.05rem; } h3 { font-size: 1.78rem; } h4 { font-size: 1.52rem; } p, ul, ol { font-size: 1.0625rem; } .lead { font-size: 1.25rem; } } <section> <div class="container"> <p style="color:#8C8C8C;"><i>Note: Resize window too see text grow/shrink in browser window <= 1279px</i></p> <br> <h1 class="display-1">Display 1</h1> <h1 class="display-2">Display 2</h1> <h1 class="display-3">Display 3</h1> <h1 class="display-4">Display 4</h1> <br> <br> <br> <br> <h1>h1. The quick brown fox jumps over the lazy dog</h1> <h2>h2. The quick brown fox jumps over the lazy dog</h2> <h3>h3. The quick brown fox jumps over the lazy dog</h3> <h4>h4. The quick brown fox jumps over the lazy dog</h4> <p>The earliest known appearance of the phrase was in The Boston Journal. In an article titled "Current Notes" in the February 9, 1885, edition, the phrase is mentioned as a good practice sentence for writing students: "A favorite copy set by writing teachers for their pupils is the following, because it contains every letter of the alphabet: 'A quick brown fox jumps over the lazy dog.'"[2] Dozens of other newspapers published the phrase over the next few months, all using the version of the sentence starting with "A" rather than "The"</p> <p>The earliest known use of the phrase starting with "The" is from the 1888 book Illustrative Shorthand by Linda Bronson.[4] The modern form (starting with "The") became more common even though it is slightly longer than the original (starting with "A").</p> <p>A 1908 edition of the Los Angeles Herald Sunday Magazine records that when the New York Herald was equipping an office with typewriters "a few years ago", staff found that the common practice sentence of "now is the time for all good men to come to the aid of the party" did not familiarize typists with the entire alphabet, and ran onto two lines in a newspaper column. They write that a staff member named Arthur F. Curtis invented the "quick brown fox" pangram to address this.</p> <br> <br> <br> <br> <p class="lead">Lead paragraph: As the use of typewriters grew in the late 19th century.</p> <p>The phrase began appearing in typing lesson books as a practice sentence. Early examples include How to Become Expert in Typewriting: A Complete Instructor Designed Especially for the Remington Typewriter (1890),[6] and Typewriting Instructor and Stenographer's Hand-book (1892). By the turn of the 20th century, the phrase had become widely known. In the January 10, 1903, issue of Pitman's Phonetic Journal, it is referred to as "the well known memorized typing line embracing all the letters of the alphabet".</p> <p>Robert Baden-Powell's book Scouting for Boys (1908) uses the phrase as a practice sentence for signaling.</p> <p>The first message sent on the Moscow–Washington hotline on August 30, 1963, was the test phrase "THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG'S BACK 1234567890".</p> <br> <br> <br> <br> <ul class="list-unordered"> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> </ul> <br> <br> <br> <br> <ol class="list-ordered"> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li> </ol> <br> <br> <br> <br> </div> </section>

享受