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

Question

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

的宽度

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

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

现在，如果在 vw 中设置单位，则在调整视口宽度大小时字体大小 increases/decreases，我想确保没有断字，假设您正在调整大小上面有文字的图像。这有可能实现吗？

Answer 1

您可以将容器设置为特定的 vw 宽度，然后将字体大小设置为特定的 vw 值。有了这两件事，调整大小应该可以按预期工作，provided 字体是显式加载的，而不是依赖于 "whatever font the browser decides to use"，所以没有 CSS serif，但也没有 CSS "Times New Roman"，因为您不知道该字体的哪个版本最终会被实际使用，因此您不能相信字体规格是您需要的。所以：

通过 @font-face 规则加载特定字体
确保您的容器的宽度设置为 vw
确保您的容器以 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

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

Avoid word break while using vw for font size

css

fonts

font-size