如何根据容器大小设置字体大小？

Question

如何根据容器大小设置字体大小？

我有一个宽度和高度为％的容器，因此它会根据外部因素进行缩放。我希望容器内的字体相对于容器的大小是一个恒定的大小。有没有什么好办法用CSS做到这一点？在font-size: x%只将根据原来的字体尺寸（这将是100％）缩放的字体。

Answer 1

如果要将font-size设置为视口宽度的百分比，请使用vw单位：#mydiv { font-size: 5vw; }另一种方法是使用嵌入在HTML中的SVG。它只是几行。text元素的font-size属性将被解释为“user units”，例如视口的定义。因此，如果将视口定义为0 0 100 100，则字体大小为1将是svg元素大小的百分之一。不，没有办法在CSS中使用计算来做到这一点。问题是用于font-size的百分比（包括计算中的百分比）是根据继承的字体大小而不是容器的大小来解释的。CSS可以使用一个叫做bw（box-width）的单元来实现这个目的，所以你可以说div { font-size: 5bw; }，但我从未听过这个提议。

Answer 2

另一个js替代方案：工作实例fontsize&nbsp;=&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;fontSize&nbsp;=&nbsp;$("#container").width()&nbsp;*&nbsp;0.10;&nbsp;//&nbsp;10%&nbsp;of&nbsp;container&nbsp;width &nbsp;&nbsp;&nbsp;&nbsp;$("#container&nbsp;h1").css('font-size',&nbsp;fontSize);};$(window).resize(fontsize);$(document).ready(fontsize);或者如torazaburo所说，你可以使用svg。我把一个简单的例子放在一起作为概念证明：SVG示例<div&nbsp;id="container"> &nbsp;&nbsp;&nbsp;&nbsp;<svg&nbsp;width="100%"&nbsp;height="100%"&nbsp;viewBox="0&nbsp;0&nbsp;13&nbsp;15"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<text&nbsp;x="0"&nbsp;y="13">X</text> &nbsp;&nbsp;&nbsp;&nbsp;</svg></div>