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

Question

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

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

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

我可以使用javascript进行操作，调整文本大小，直到没有填充/边距的容器达到单元格的宽度和/或高度。或者将其包含在溢出设置为auto的内容中，并查看它何时溢出或其他内容。

可以用纯CSS完成吗？

考虑到字体不是固定大小的字体。如果你愿意，可以使用Arial。

Answer 1

检查出来：http://css-tricks.com/viewport-sized-typography/

不幸的是，这仅适用于Chrome 20+＆amp; IE 10+所以现在你必须坚持a js solution ....

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

当然这只会假设文本容器大小以某种方式基于窗口大小。