使用vw进行字体大小时避免单词中断

提问于 2024-04-20T21:42:32+08:00

浏览次

0

font-size 和 screen width 之间是否存在数学关系，以便在调整视口/窗口宽度的大小调整期间没有单词中断？

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

Lorem ipsum dolor坐下来，精神上的adipistur elit .

如果我要调整视口的宽度，如果视口宽度很小以容纳句子，则会出现单词中断，因为font-size设置为 px 单位 .

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

1 回答

1
您可以将容器设置为特定的 vw 宽度，然后将font-size设置为特定的 vw 值 . 有了这两件事，调整大小应该按预期工作，前提是明确加载字体，而不是依赖"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
回复于 2024-04-20T21:42:32+08:00

相关问题