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

Question

我希望使用大众单位来确定排版的大小，但是这样做时文字很大，明显比视口宽度大。基本上我希望我的文本在父.container中响应，所以文本永远不会被裁剪或溢出，就像使用像px或em这样的静态大小单位一样？

HTML

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

CSS

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

h1 {
  font-size: 40vw;
}

FIDDLE

Answer 1

您的小提琴正确呈现。

• font-size，经典地，指的是大写字母M的宽度。现在让我们继续使用。*
• 1vw是视口宽度的1％。

因此，font-size: 40vw粗略地表示＆＃34;渲染此文本，使得大写字母M的宽度为视口宽度的40％＆＃34;。换句话说，每个角色都会非常庞大​​。

它不会打破到一个新行，因为它只是一个单词，而CSS默认只在单词之间断开。 （要打破单词中的字符，你可以在元素上使用word-break: break-all。但它通常看起来很糟糕。）

您在评论中确认您正在尝试扩大标题中的字体大小，以使其中的全文占视口宽度的某个百分比。根据您的具体情况，您可以

1. 使用较小的font-size，仍在vw，并接受该文字不会始终是可预测的固定宽度;或
2. 尝试类似FitText的内容来动态调整字体大小。

这是一种耻辱，但是没有办法用纯CSS做你想做的事情;通常情况下，您的选择是在设计目标上妥协或使用一些聪明的JS /黑客来实现它。

*关于font-size的说明：我上面所说的并不是真的 font-size如何制定出来;它恰好足够接近大多数字体，它使我的答案更容易阅读。实际情况比较复杂。

更准确的经验法则是身高，即距离上升者的顶部的垂直距离（字母的上半部分，如 b ， d 和 h ）到下降器的底部（字母的下半部分，如 g ， j 和 p ）在同一行。然而，即便如此，这也是错误的;它最终归结为字体指标，并且在字体之间会有很大差异。