让文本按比例放大以适合容器答案

【问题标题】：Have text scale up in size to fit the container让文本按比例放大以适合容器
【发布时间】：2012-02-17 22:41:43
【问题描述】：

使用 CSS，特别是没有 onload javascript，是否可以这样做：

您有一个 150 像素宽和 100 像素高的单元格。它包含一个文本，例如：$20,00 或任何变体。

您希望它完全适合容器的大小。

我可以使用 javascript 来完成，放大文本直到没有填充/边距的容器达到单元格的宽度和/或高度。或者将它包含在溢出设置为自动的东西中，看看它什么时候溢出。

可以用纯CSS来完成吗？

考虑到字体也不是固定大小的字体。如果您愿意，请使用 Arial。

【问题讨论】：

我不认为你可以不使用 jquery 来做到这一点，看看这个答案：stackoverflow.com/questions/4408937/…
我赞成。纯 CSS 无法做到这一点。
你最好的结果可能是在你的字体大小中使用一些 calc() 魔法。我对此进行了一些实验，但实际上，如果您没有变量并且无法确定单个字符的宽度，则无法使用 CSS 来执行此操作。您可能知道FitText，但这是使用 JS 执行此操作的简单方法，否则会为您节省大量工作:) 如果您想出一些有趣的解决方案，请告诉我们，顺便说一句。
“否”的答案有点过时了。现在几乎所有主流浏览器都支持 vh、vw 和 vmin 视口单元，Opera 是主要的例外。 caniuse.com/viewport-units
Second Mark 的评论，Opera 改用 webkit 让他们现在也支持了

标签： css fonts scale

【解决方案1】：

看看这个：http://css-tricks.com/viewport-sized-typography/

不幸的是，这只适用于 Chrome 20+ 和 IE 10+，所以现在你必须坚持使用 a js solution....

【讨论】：

【解决方案2】：

我做过的一件不完美但在某些情况下可以完成工作的事情是使用@media 规则来处理小于 X 像素的屏幕尺寸，将字体大小设置为更小或更大。

h2{
  font-size:25px
}

@media screen and (max-width: 850px){/* for screens smaller then 850px, set the font size smaller */
   h2{
     font-size:19px;
   }
}

当然，这仅在文本容器大小以某种方式基于窗口大小的情况下才有效。

【讨论】：