纯CSS使字体大小响应基于动态字符量

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