尽可能多地缩放固定大小中的任何文本[duplicate]

Question

我有一个固定大小的

（假设宽度为300px，高度为200px)和一个文本在里面。下面是我的结构：

标题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>

我希望在此固定大小的

中尽可能缩放文本字体大小（宽度和高度不超过

界限）。而且我想动态地做，所以它匹配任何文本长度。你知道我怎么做吗？

PS：这里有一个JS小提琴说明了这个问题:https://jsfidle.net/superkalo/nqf46tft/

编辑：我假设只有CSS的解决方案是不可能的。您知道有什么javascript技巧可以解决这个问题吗？

Answer 1

看看这个。但是，我认为你需要做很多工作。http://madebymike.com.au/writing/precise-control-responsive-typography/