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

Question

使用CSS,特别是没有onload javascript,可以这样做:

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

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

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

它可以用纯CSS完成吗？

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

Answer 1

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

不幸的是,这仅适用于Chrome 20+和IE 10+,所以现在你必须坚持使用js解决方案 ....

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

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