使用 vw 字体大小时避免分词答案

【问题标题】：Avoid word break while using vw for font size使用 vw 字体大小时避免分词
【发布时间】：2017-03-28 07:54:48
【问题描述】：

font-size 和 屏幕宽度 之间是否存在数学关系，因此在调整视口/窗口宽度时不会出现断字？

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

如果我要调整视口的宽度，如果视口宽度很小以适应句子，则会出现断字，因为字体大小是在pxunits 中设置的。

现在，如果单位设置为vw，则在调整视口宽度大小期间字体大小会增加/减少，我想确保没有断字，假设您正在调整带有文本的图像大小.这有可能实现吗？

【问题讨论】：

有人可以覆盖您的字体大小设置，并且许多浏览器都有默认的最小字体大小值，因此您的实际问题很可能不会以这种方式解决。
这不是问题，我要实现这个
您还必须在“数学关系”中包含您的确切文本。因此，您必须测量不同字体大小的文本长度以确定比例。如果您使用的是固定宽度字体，则可能存在更多直接相关性，但这仍然取决于您的文本中有多少字符。
这可以通过使用 SVG 来解决吗？ svg 图像中的文本元素？

标签： css fonts font-size

【解决方案1】：

您可以将您的容器设置为特定的vw 宽度，然后将您的字体大小设置为特定的vw 值。有了这两件事，调整大小应该像你期望的那样工作，提供字体是显式加载的，而不是依赖于“浏览器决定使用的任何字体”，所以没有 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

【讨论】：

啊！棒极了！我在px 而不是vw 中设置宽度时犯了一个错误，这正是我想要的！点赞！