有最小字体大小和最大字体大小这样的东西吗？

Question

我正在尝试使 div 中的字体响应浏览器窗口。到目前为止，它运行良好，但父 div 的 max-width 为 525px 。进一步调整浏览器大小不会使字体停止调整大小。这让我想知道是否存在 min-font-size 或 max-font-size 这样的东西，如果不存在这样的东西，是否有办法实现类似的东西。

我认为在 font-size 使用百分比会起作用，但文本位不会相应地缩放到父 div。这是我所拥有的：

父 div 的 CSS：

 .textField{
    background-color:rgba(88, 88, 88, 0.33);

    width:40%;
    height:450px;

    min-width:200px;
    max-width:525px;

    z-index:2;
}

相关文本的 CSS：

 .subText{
    position:relative;
    top:-55px;
    left:15px;

    font-family:"news_gothic";
    font-size:1.3vw;
    font-size-adjust:auto;

    width:90%;

    color:white;

    z-index:1;
}

原文由 Toby van Kempen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不，没有最小或最大字体大小的 CSS 属性。浏览器通常有最小字体大小的设置，但这是在用户而非作者的控制之下。

您可以使用 @media 查询 根据屏幕或窗口宽度等进行一些 CSS 设置。在此类设置中，例如，如果窗口非常窄，您可以将字体大小设置为特定的小值。

原文由 Jukka K. Korpela 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以通过使用公式并包括视口宽度来完成。

 font-size: calc(7px + .5vw);

这会将最小字体大小设置为 7px，并根据视口宽度将其放大 .5vw。

原文由 Brad Ahrens 发布，翻译遵循 CC BY-SA 4.0 许可协议