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

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 = function () {
    var fontSize = $("#container").width() * 0.10; // 10% of container width
    $("#container h1").css('font-size', fontSize);};$(window).resize(fontsize);$(document).ready(fontsize);

或者如torazaburo所说，你可以使用svg。我把一个简单的例子放在一起作为概念证明：

SVG示例

<div id="container">
    <svg width="100%" height="100%" viewBox="0 0 13 15">
        <text x="0" y="13">X</text>
    </svg></div>