CSS 基于容器宽度的字体缩放

Font scaling based on width of container

提问by Francesca

I'm having a hard time getting my head around font scaling.

我很难理解字体缩放。

I currently have this sitewith a body font-sizeof 100%. 100% of what though? This seems to compute out at 16 pixels.

我目前拥有这个网站的主体font-size为 100%。100%什么？这似乎以 16 像素计算。

I was under the impression that 100% would somehow refer to the size of the browser window, but apparently not because it's always 16 pixels whether the window is resized down to a mobile width or full blown widescreen desktop.

我的印象是 100% 会以某种方式指代浏览器窗口的大小，但显然不是因为无论窗口大小调整为移动宽度还是完整的宽屏桌面，它总是 16 像素。

How can I make the text on my site scale in relation to its container? I tried using em, but this doesn't scale either.

如何使我网站上的文本相对于其容器进行缩放？我尝试使用em，但这也不能扩展。

My reasoning is that things like my menu become squished when you resize, so I need to reduce the pxfont-sizeof .menuItemamong other elements in relation to the width of the container. (For example, in the menu on a large desktop, 22pxworks perfectly. Move down to tablet width and 16pxis more appropriate.)

我的理由是，当你调整，这东西像我的菜单中就被压扁，所以我需要降低pxfont-size的.menuItem相对其它元素的容器的宽度之中。（例如，在大型桌面上的菜单中，22px效果很好。向下移动到平板电脑宽度16px更合适。）

I'm aware I can add breakpoints, but I really want the text to scale as wellas having extra breakpoints, otherwise I'll end up with hundreds of breakpoints for every 100 pixels decrease in width to control the text.

我知道我可以添加断点，但我真的希望文本可以缩放并有额外的断点，否则我最终会在宽度每减少 100 个像素时使用数百个断点来控制文本。

回答by jbenjohnson

EDIT: If the container is not the bodyCSS Tricks covers all of your options in Fitting Text to a Container.

编辑：如果容器不是主体CSS Tricks 涵盖Fitting Text to a Container 中的所有选项。

If the container is the body, what you are looking for is Viewport-percentage lengths:

如果容器是主体，则您要查找的是Viewport-percentage lengths：

The viewport-percentage lengthsare relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist.

该视口百分比长度是相对于的尺寸初始包含块。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。但是，当根元素上的overflow 值为auto 时，则假定任何滚动条都不存在。

The values are:

这些值是：

• vw(% of the viewport width)
• vh(% of the viewport height)
• vi(1% of the viewport size in the direction of the root element's inline axis)
• vb(1% of the viewport size in the direction of the root element's block axis)
• vmin(the smaller of vwor vh)
• vmax(the larger or vwor vh)

• vw（视口宽度的百分比）
• vh（视口高度的百分比）
• vi（根元素内联轴方向上视口大小的 1%）
• vb（在根元素的块轴方向上视口大小的 1%）
• vmin（vw或 中的较小者vh）
• vmax（较大的 或vw或vh）

1 v* is equal to 1% of the initial containing block.

1 v* 等于初始包含块的 1%。

Using it looks like this:

使用它看起来像这样：

p {
    font-size: 4vw;
}

As you can see, when the viewport width increases, so does the font-size, without needing to use media queries.

如您所见，当视口宽度增加时，字体大小也会增加，而无需使用媒体查询。

These values are a sizing unit, just like pxor em, so they can be used to size other elements as well, such as width, margin, or padding.

这些值是一个大小单位，就像px或一样em，因此它们也可用于调整其他元素的大小，例如宽度、边距或填充。

Browser support is pretty good, but you'll likely need a fallback, such as:

浏览器支持非常好，但您可能需要回退，例如：

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

Check out the support statistics: http://caniuse.com/#feat=viewport-units.

查看支持统计数据：http: //caniuse.com/#feat=viewport-units。

Also, check out CSS-Tricks for a broader look: Viewport Sized Typography

另外，查看 CSS-Tricks 以获得更广泛的外观：视口大小的排版

Here's a nice article about setting minimum/maximum sizes and exercising a bit more control over the sizes: Precise control over responsive typography

这是一篇关于设置最小/最大尺寸并对尺寸进行更多控制的好文章：精确控制响应式排版

And here's an article about setting your size using calc() so that the text fills the viewport: http://codepen.io/CrocoDillon/pen/fBJxu

这是一篇关于使用 calc() 设置大小以便文本填充视口的文章：http: //codepen.io/CrocoDillon/pen/fBJxu

Also, please view this article, which uses a technique dubbed 'molten leading' to adjust the line-height as well. Molten Leading in CSS

另外，请查看这篇文章，它也使用了一种称为“熔化引导”的技术来调整行高。CSS 中的熔融领先

回答by ScottS

But what if the container is not the viewport (body)?

但是如果容器不是视口（主体）呢？

This question is asked in comment by Alex under the accepted answer.

亚历克斯在接受的答案下的评论中提出了这个问题。

That fact does not mean vwcannot be used to some extent to size for that container. Now to see any variation at all one has to be assuming that the container in some way is flexible in size. Whether through a direct percentage widthor through being 100% minus margins. The point becomes "moot" if the container is always set to, let's say, 200pxwide--then just set a font-sizethat works for that width.

这个事实并不意味着vw在某种程度上不能用于该容器的大小。现在要看到任何变化，必须假设容器在某种程度上是灵活的。无论是通过直接百分比width还是通过 100% 减去利润。如果容器始终设置为“200px宽”，那么这一点就变得“没有实际意义” ——那么只需设置一个font-size适用于该宽度的值。

Example 1

示例 1

With a flexible width container, however, it must be realized that in some way the container is still being sized off the viewport. As such, it is a matter of adjusting a vwsetting based off that percentage size difference to the viewport, which means taking into account the sizing of parent wrappers. Take this example:

然而，对于灵活宽度的容器，必须意识到容器的尺寸仍然在视口之外。因此，这是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;
}

Assuming here the divis a child of the body, it is 50%of that 100%width, which is the viewport size in this basic case. Basically, you want to set a vwthat is going to look good to you. As you can see in my comment in the above CSS content, you can "think" through that mathematically with respect to the full viewport size, but you don't needto do that. The text is going to "flex" with the container, because the container is flexing with the viewport resizing. UPDATE: here's an example of two differently sized containers.

假设这里div是 的子项body，它50%具有该100%宽度，即在这种基本情况下的视口大小。基本上，您想设置一个vw对您来说看起来不错的。正如您在上述 CSS 内容中的评论中看到的那样，您可以从数学上“思考”关于完整视口大小的问题，但您不需要这样做。文本将随着容器“弯曲”，因为容器会随着视口大小的调整而弯曲。更新：这是两个不同大小的容器的示例。

Example 2

示例 2

You can help ensure viewport sizing by forcing the calculation based off that. Consider this example:

您可以通过强制基于视口大小进行计算来帮助确保视口大小。考虑这个例子：

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

The sizing is still based off viewport, but is in essence set up based off the container size itself.

大小仍然基于视口，但本质上是基于容器大小本身设置的。

Should Sizing of the Container Change Dynamically...

容器的大小是否应该动态变化...

If sizing of the container element ended up changing dynamically its percentage relationship either via @mediabreak points or via JavaScript, then whatever the base "target" was would need recalculation to maintain the same "relationship" for text sizing.

如果容器元素的大小最终通过@media断点或通过 JavaScript动态更改其百分比关系，那么无论基本“目标”是什么，都需要重新计算以保持相同的文本大小“关系”。

Take example #1 above. If the divwas switched to 25%width by either @mediaor JavaScript, then at the same time, the font-sizewould need to adjust in either the media query or by JavaScript to the new calculation of 5vw * .25 = 1.25. This would put the text size at the same size it would have been had the "width" of the original 50%container been reduced by half from viewport sizing, but has now been reduced due to a change in its own percentage calculation.

以上面的示例#1 为例。如果由或 JavaScriptdiv切换到25%宽度@media，那么同时，font-size需要在媒体查询或 JavaScript 中调整到 的新计算5vw * .25 = 1.25。这将使文本大小与原始50%容器的“宽度”从视口大小减少一半时的大小相同，但现在由于其自身百分比计算的变化而减少。

A Challenge

一个挑战

With the CSS3 calc()functionin use, it would become difficult to adjust dynamically, as that function does not work for font-sizepurposes at this time. So you could not do a pure CSS 3 adjustment if your width is changing on calc(). Of course, a minor adjustment of width for margins may not be enough to warrant any change in font-size, so it may not matter.

使用CSS3calc()功能时，动态调整将变得困难，因为该功能目前不适用于font-size目的。因此，如果您的宽度在calc(). 当然，对边距宽度的微小调整可能不足以保证 的任何变化font-size，因此这可能无关紧要。

回答by Dantio

Solution with SVG:

SVG 解决方案：

<div style="width: 60px;">  
  <svg width="100%" height="100%" viewBox="0 -200 1000 300"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text font-size="300" fill="black">Text</text>
  </svg>
</div>

https://jsfiddle.net/qc8ht5eb/

https://jsfiddle.net/qc8ht5eb/

---

---

Solution with SVG and text-wrapping using foreignObject:

使用 SVG 和文本换行的解决方案foreignObject：

<svg viewBox="0 0 100 100">
  <foreignObject width="100%" height="100%">
    <h1>heading</h1>

    lorem ipsum dolor sit amet
  </foreignObject>
</svg> 

https://jsfiddle.net/2rp1q0sy/

https://jsfiddle.net/2rp1q0sy/

回答by lsblsb

In one of my projects I use a "mixture" between vw and vh to adjust the font size to my needs, for example:

在我的一个项目中，我使用 vw 和 vh 之间的“混合”来根据我的需要调整字体大小，例如：

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

I know this doesn't answer the OP's question, but maybe it can be a solution to anyone else.

我知道这不能回答 OP 的问题，但也许它可以成为其他任何人的解决方案。

回答by hegez

Pure-CSS solution with calc(), CSS units and math

带有calc()、CSS 单位和数学的纯 CSS 解决方案

This is precisely not what OP asks, but may make someone's day. This answer is not spoon-feedingly easy and needs some researching on the developer end.

这恰恰不是 OP 所要求的，但可能会让某人开心。这个答案并不容易，需要在开发人员端进行一些研究。

I came finally to get a pure-CSS solution for this using calc()with different units. You will need some basic mathematical understanding of formulas to work out your expression for calc().

我终于找到了一个使用calc()不同单位的纯 CSS 解决方案。您需要对公式有一些基本的数学理解才能计算出calc().

When I worked this out, I had to get a full-page-width responsive header with some padding few parents up in DOM. I'll use my values here, replace them with your own.

当我解决这个问题时，我必须得到一个全页面宽度的响应式标题，在 DOM 中填充一些父项。我将在这里使用我的值，用你自己的值替换它们。

To mathematics

对数学

You will need:

你会需要：

• Nicely adjusted ratio in some viewport. I used 320 pixels, thus I got 24 pixels high and 224 pixels wide, so the ratio is 9.333... or 28 / 3
• The container width, I had padding: 3emand full width so this got to 100wv - 2 * 3em

• 在某些视口中很好地调整了比率。我使用了 320 像素，因此我得到了 24 像素高和 224 像素宽，所以比率是 9.333... 或 28 / 3
• 容器宽度，我有padding: 3em和全宽所以这得到100wv - 2 * 3em

X is the width of container, so replace it with your own expression or adjust the value to get full-page text. Ris the ratio you will have. You can get it by adjusting the values in some viewport, inspecting element width and height and replacing them with your own values. Also, it is width / heigth;)

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

And bang! It worked! I wrote

砰！有效！我写

font-size: calc((75vw - 4.5rem) / 7)

to my header and it adjusted nicely in every viewport.

到我的标题，它在每个视口中都进行了很好的调整。

But how does it work?

但它是如何工作的？

We need some constants up here. 100vwmeans the full width of viewport, and my goal was to establish full-width header with some padding.

我们需要一些常量。100vw表示视口的全宽，我的目标是建立带有一些填充的全宽标题。

The ratio. Getting a width and height in one viewport got me a ratio to play with, and with ratio I know what the height should be in other viewport width. Calculating them with hand would take plenty of time and at least take lots of bandwidth, so it's not a good answer.

比例。在一个视口中获得宽度和高度让我可以使用一个比例，并且通过比例我知道其他视口宽度中的高度应该是多少。手动计算它们会花费大量时间，至少会占用大量带宽，因此这不是一个好的答案。

Conclusion

结论

I wonder why no-one has figured this out and some people are even telling that this would be impossible to tinker with CSS. I don't like to use JavaScript in adjusting elements, so I don't accept JavaScript (and forget about jQuery) answers without digging more. All in all, it's good that this got figured out and this is one step to pure-CSS implementations in website design.

我想知道为什么没有人弄清楚这一点，有些人甚至说这是不可能修改 CSS 的。我不喜欢在调整元素时使用 JavaScript，所以我不接受 JavaScript（忘记 jQuery）答案而不深入挖掘。总而言之，解决这个问题很好，这是在网站设计中实现纯 CSS 的一步。

I apologize of any unusual convention in my text, I'm not native speaker in English and am also quite new to writing Stack Overflow answers.

对于我的文本中的任何不寻常的约定，我深表歉意，我的母语不是英语，并且对编写 Stack Overflow 答案也很陌生。

It should also be noted that we have evil scrollbars in some browsers. For example, when using Firefox I noticed that 100vwmeans the full width of viewport, extending under scrollbar (where content cannot expand!), so the fullwidth text has to be margined carefully and preferably get tested with many browsers and devices.

还应该注意的是，我们在某些浏览器中有邪恶的滚动条。例如，在使用 Firefox 时，我注意到这100vw意味着视口的全宽，在滚动条下扩展（内容无法扩展！），因此全宽文本必须仔细留出边距，最好在许多浏览器和设备上进行测试。

回答by Dan Ovidiu Boncut

There is a big philosophy for this issue.

这个问题有一个很大的哲学。

The easiest thing to do would be to give a certain font-size to body (I recommend 10), and then all the other element would have their font in emor rem. I'll give you an example to understand those units. Emis always relative to its parent:

最简单的方法是为 body 指定一个特定的字体大小（我推荐 10），然后所有其他元素的字体都将在emor 中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 */

Remis always relative to body:

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 */

And then you could create a script that would modify font-size relative to your container width. But this isn't what I would recommend. Because in a 900 pixels width container for example you would have a pelement with a 12 pixels font-size let's say. And on your idea that would become an 300 pixels wide container at 4 pixels font-size. There has to be a lower limit.

然后你可以创建一个脚本来修改相对于你的容器宽度的字体大小。但这不是我推荐的。因为例如在一个 900 像素宽度的容器中，你会有一个p具有 12 像素字体大小的元素。根据您的想法，这将成为一个 300 像素宽的容器，字体大小为 4 像素。必须有一个下限。

Other solutions would be with media queries, so that you could set font for different widths.

其他解决方案是使用媒体查询，以便您可以为不同的宽度设置字体。

But the solutions that I would recommend is to use a JavaScript library that helps you with that. And fittext.jsthat I found so far.

但我推荐的解决方案是使用 JavaScript 库来帮助您解决这个问题。还有我目前找到的fittext.js。

回答by tnt-rox

Here is the function:

这是函数：

document.body.setScaledFont = function(f) {
  var s = this.offsetWidth, fs = s * f;
  this.style.fontSize = fs + '%';
  return this
};

Then convert all your documents child element font sizes to em's or %.

然后将所有文档子元素字体大小转换为em's 或%。

Then add something like this to your code to set the base font size.

然后将类似的内容添加到您的代码中以设置基本字体大小。

document.body.setScaledFont(0.35);
window.onresize = function() {
    document.body.setScaledFont(0.35);
}

http://jsfiddle.net/0tpvccjt/

http://jsfiddle.net/0tpvccjt/

回答by tnt-rox

There is a way to do this withoutJavaScript!

有一种方法可以在没有JavaScript 的情况下做到这一点！

You can use an inline SVG image. You can use CSS on an SVG if it is inline. You have to remember that using this method means your SVG image will respond to its container size.

您可以使用内联 SVG 图像。如果是内联的，您可以在 SVG 上使用 CSS。您必须记住，使用此方法意味着您的 SVG 图像将响应其容器大小。

Try using the following solution...

尝试使用以下解决方案...

HTML

HTML

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.96 358.98" >
      <text>SAVE 0</text>
  </svg>
</div>

CSS

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

Example: https://jsfiddle.net/k8L4xLLa/32/

示例：https: //jsfiddle.net/k8L4xLLa/32/

Want something more flashy?

想要更炫的东西？

SVG images also allow you to do cool stuff with shapes and junk. Check out this great use case for scalable text...

SVG 图像还允许您使用形状和垃圾做很酷的事情。查看这个可扩展文本的绝佳用例...

https://jsfiddle.net/k8L4xLLa/14/

https://jsfiddle.net/k8L4xLLa/14/

回答by Roman Rekhler

This may not be super practical, but if you want a font to be a direct function of the parent, without having any JavaScript that listens/loops (interval) to read the size of the div/page, there is a way to do it. Iframes.

这可能不是很实用，但是如果你想让一个字体成为父级的直接函数，而没有任何 JavaScript 来监听/循环（间隔）来读取 div/page 的大小，有一种方法可以做到. 内嵌框架。

Anything within the iframe will consider the size of the iframe as the size of the viewport. So the trick is to just make an iframe whose width is the maximum width you want your text to be, and whose height is equal to the maximum height * the particular text's aspect ratio.

iframe 中的任何内容都会将 iframe 的大小视为视口的大小。所以诀窍是制作一个 iframe，其宽度是您希望文本的最大宽度，其高度等于最大高度 * 特定文本的纵横比。

Setting aside the limitation that viewport units can't also come along side parent units for text (as in, having the % size behave like everyone else), viewport units do provide a very powerful tool: being able to get the minimum/maximum dimension. You can't do that anywhere else - you can't say...make the height of this div be the width of the parent * something.

抛开视口单位不能与文本的父单位一起出现的限制（例如，百分比大小的行为与其他人一样），视口单位确实提供了一个非常强大的工具：能够获得最小/最大尺寸. 你不能在其他任何地方这样做 - 你不能说......让这个 div 的高度成为父元素的宽度 * 某物。

That being said, the trick is to use vmin, and to set the iframe size so that [fraction] * total height is a good font size when the height is the limiting dimension, and [fraction] * total width when the width is the limiting dimension. This is why the height has to be a product of the width and the aspect ratio.

话虽这么说，诀窍是使用 vmin，并设置 iframe 大小，以便 [分数] * 总高度在高度为限制尺寸时是一个很好的字体大小，而当宽度为限制尺寸时 [分数] * 总宽度是限制维度。这就是为什么高度必须是宽度和纵横比的乘积。

For my particular example, you have

对于我的特定示例，您有

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

The small annoyance with this method is that you have to manually set the CSS of the iframe. If you attach the whole CSS file, that would take up a lot of bandwidth for many text areas. So, what I do is attach the rule that I want directly from my CSS.

这种方法的小麻烦是您必须手动设置 iframe 的 CSS。如果您附加整个 CSS 文件，这将占用许多文本区域的大量带宽。所以，我所做的是直接从我的 CSS 中附加我想要的规则。

var rule = document.styleSheets[1].rules[4];
var iDoc = document.querySelector('iframe').contentDocument;
iDoc.styleSheets[0].insertRule(rule.cssText);

You can write small function that gets the CSS rule / all CSS rules that would affect the text area.

您可以编写一个小函数来获取 CSS 规则/所有会影响文本区域的 CSS 规则。

I cannot think of another way to do it without having some cycling/listening JavaScript. The real solution would be for browsers to provide a way to scale text as a function of the parent container andto also provide the same vmin/vmax type functionality.

如果没有一些循环/聆听 JavaScript，我想不出另一种方法来做到这一点。真正的解决方案是浏览器提供一种根据父容器缩放文本的方法，并提供相同的 vmin/vmax 类型功能。

JSFiddle: https://jsfiddle.net/0jr7rrgm/3/(click once to lock the red square to the mouse, and click again to release)

JSFiddle：https://jsfiddle.net/0jr7rrgm/3/ （点击一次鼠标锁定红色方块，再次点击释放）

Most of the JavaScript in the fiddle is just my custom click-drag function.

小提琴中的大部分 JavaScript 只是我自定义的单击-拖动功能。

回答by WoodrowShigeru

Using vw, em& co. works for sure, but IMO it always needs a human's touch for fine-tuning.

使用vw, em& co. 确实有效，但 IMO 始终需要人工进行微调。

Here's a script I just wrote based on @tnt-rox' answerthat tries to automatize that human's touch:

这是我刚刚根据@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, ''));
            }
            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>

It basically reduces the font-size to 1emand then starts incrementing by 0.1 until it reaches maximum width.

它基本上将字体大小减小到1em然后开始增加 0.1，直到达到最大宽度。

JSFiddle

JSFiddle