css - 使用 vw 设置字体大小时避免断字

Question

字体大小 和屏幕宽度 之间是否存在数学关系，以便在调整视口(viewport)/窗口宽度大小时不会出现断字？

例如，如果我将段落的字体大小设置为16px，那么该段落的第一行是-

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

如果我要调整视口(viewport)的宽度，如果视口(viewport)宽度较小以容纳句子，则会出现断字，因为字体大小是以 px 为单位设置的。

现在，如果在 vw 中设置了单位，那么在调整视口(viewport)宽度大小时字体大小会增加/减少，我想确保没有断字，假设您正在调整一个上面有文字的图像。这有可能实现吗？

Answer 1

您可以将容器设置为特定的 vw 宽度，然后将字体大小设置为特定的 vw 值。有了这两件事，调整大小应该可以按预期工作，提供字体是显式加载的，而不是依赖于“浏览器决定使用的任何字体”，所以没有 CSS serif，但也没有 CSS "Times New Roman"，因为您不知道该字体的哪个版本最终会被实际使用，因此您不能相信字体指标就是您所需要的成为。所以:

1. 通过@font-face规则加载特定字体
2. 确保您的容器设置为具有以 vw 表示的宽度
3. 确保您的容器以 vw 单位指定其字体大小。

CSS:

.rs {
  width: 50vw;
  background: lightgreen;
  font-family: lato;
  font-size: 3.3vw;
}

HTML:

....
<link href="https://fonts.googleapis.com/css?family=Lato" 
<div class="rs">
  This is text This is text This is text T
</div>

实例:http://jsbin.com/januxevebe/edit?html,css,output