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

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;
}

FIDDLE

Answer 1

您的 Fiddle 正在正确渲染。

• font-size，经典地，指的是大写字母 M 的宽度。让我们暂时使用它。*
• 1vw 是视口宽度的 1%。

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

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

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

1. 使用较小的font-size，仍然在vw，并接受文本并不总是可预测的固定宽度；或
2. 尝试使用FitText 之类的方法来动态调整字体大小。

很遗憾，但没有办法用纯 CSS 完全满足您的需求；通常情况下，您的选择是在设计目标上妥协或使用一些聪明的 JS/hacks 来实现它。

---

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

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