尽可能缩放固定大小 <div> 中的任何文本[重复]答案

【问题标题】：Scale any text in fixed-size <div> as much as possible [duplicate]尽可能缩放固定大小 <div> 中的任何文本[重复]
【发布时间】：2016-09-05 05:40:25
【问题描述】：

我有一个固定大小的<header>（比如宽 300 像素，高 200 像素）和里面的文字。这是我的结构：

标题 1：

<header>
  <h1>
     This is example title, but the text length might be different.
  </h1>
</header>

我有多个这样的标题，但文本长度不同，例如：

标题 2：

<header>
  <h1>
     This is small-length text.
  </h1>
</header>

标题 3：

<header>
  <h1>
     This is bigger-length text. This is example title, but the text length might be different.
  </h1>
</header>

我想在这个固定大小的<header> 中尽可能地缩放文本字体大小（不超过<header> 的宽度和高度边界）。我想动态地做，所以它匹配任何文本长度。你有什么想法吗？

PS：这是一个说明问题的 JS 小提琴：https://jsfiddle.net/superKalo/nqf46tft/

编辑：我认为只有 CSS 的解决方案是不可能的。你知道任何可以解决这个问题的javascript技巧吗？

【问题讨论】：

纯 css 无法实现这一点，您需要一个 js 解决方案 - 搜索一下，有一些插件可以做到这一点
有一个名为 FitText.js 的插件可以做类似的事情（虽然只有宽度，AFAIR）
类似的 CSS 结果可以用这个来实现：madebymike.com.au/writing/precise-control-responsive-typography 但正如其他人所说，有明确的 javascript 插件可用于执行此特定操作。
@Pete 谢谢，我也将 JavaScript 添加为标签。我还没有真正找到可以做到这一点的插件。
@Johannes 是的，我尝试了使用 FitText.js 的解决方案，但据我所知，它只考虑了容器的宽度。我需要 - 宽度和高度。

【解决方案1】：

【讨论】：