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

Question

我希望使用 VW 单位来调整排版的大小，但这样做时文本会很大并且明显大于视口(viewport)宽度。本质上，我希望我的文本在父 .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

您的 Fiddle 呈现正确。

• font-size，传统上指的是大写字母 M 的宽度。让我们暂时使用它。*
• 1vw 是视口(viewport)宽度的 1%。

因此，font-size: 40vw 大致意思是“渲染此文本，使大写字母 M 的宽度为视口(viewport)宽度的 40%”。换句话说，每个单独的 Angular 色都将非常庞大。

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

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

1. 使用较小的font-size，仍然是vw，并接受文本不会总是可预测的固定宽度；或
2. 试试像 FitText 这样的东西动态调整字体大小。

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

---

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

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