使用大众单位的文本不起作用

Question

我希望使用 VW 单位来调整排版的大小，但是这样做时文本会很大并且明显大于视口宽度。本质上，我希望我的文本在父 .container 中响应，因此文本永远不会像使用 px 或 em 这样的静态大小单位时那样被裁剪或溢出？

HTML

<div class="container">
    <h1>Responsive Typography!</h1>
</div>

CSS

.container {
  width: 100%;
  background: red;
  height: 100%;
}

h1 {
  font-size: 40vw;
}

Answer 1

您的 Fiddle 渲染正确。

因此，font-size: 40vw大致就是"render this text such that the width of a capital letter M would be 40% of the viewport width"。换句话说，每个角色都非常庞大。

它不会换行，因为它都是一个单词，而且 CSS 默认情况下只会在单词之间换行。（要断开单词中的字符，您可以在元素上使用 word-break: break-all。不过，它通常看起来很糟糕。）

您在评论中确认您正在尝试放大页眉中的字体大小，以便其中的全文占视口宽度的一定百分比。根据您的情况，您可以

真可惜，但没有办法用纯 CSS 做你想做的事；通常情况下，您的选择是在您的设计目标上妥协或使用一些聪明的 JS/hacks 来实现它。

* 关于 font-size 的注释：我上面说的不是真的 font-size 是怎样的解决了;对于大多数字体来说它恰好足够接近并且它使我的答案更容易阅读。实际情况比较复杂。

更准确的经验法则是体高，即距上升器顶部的垂直距离（b 等字母的上部、d 和 h) 到下行字母的底部（字母的下半部分，如 g, j 和 p) 在同一行。然而，即使这是非常当然的，而且常常是错误的；它最终归结为字体规格，并且字体之间会有很大差异。

Text using VW unit not working