我有一个50vw的Div，里面有一个字体为2vw的文本段落。根据窗口大小，单词的位置会非常不同。在Chrome中，它们保持相同的比例，但是在Safari中，布局被破坏了。我无法控制每个用户的浏览器，但需要保留布局。
对于不同的字体，我得到不同的增长率。一些类似Arial的东西几乎会保留在原处，但是自定义的东西（来自Google字体）在调整大小时会经历增长的步伐（宽度或高度跳跃，但不能同时出现）。我想问题出在字体属性内。
[此外，我检查了字体以查看计算出的像素，并确定当经过任何.5 px单位（如15.5px或17.5px）时，字体会跳转。我怀疑Safari像素渲染。可以覆盖/控制吗？
我已经尝试过亚像素抗锯齿，字体平滑处理，并且还玩了一段时间的字体功能设置，但是最后一个我并不十分了解它的工作原理。
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Mansalva&display=swap');
</style>
</head>
<body>
<div class="container">
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat voluptates aperiam quae saepe veniam cum soluta impedit repellendus repudiandae sed necessitatibus nostrum placeat porro, magnam minus sequi eum dolores delectus!</p>
</div>
</body>
</html>
和CSS-我使用了一种随机字体，mansalva
.container {
position: relative;
background: red;
display: flex;
align-items: center;
width: 50vw;
height: 50vw;
}
.text {
font-family: mansalva;
font-size: 2vw;
}
如果使用浏览器宽度为SAFARI的浏览器，您会看到单词在行之间跳跃，即不保持比率
您使用的是Windows还是Mac？ Windows上的Safari很古老，很少有人使用它而不用担心。
经过一周的寻找解决方案后，遇到了最简单的事情。它不是一个很好的解决方案，但是是一个解决方案。如果我将段落宽度设置为有限的字符数：
.container {
position: relative;
background: red;
display: flex;
align-items: center;
width: 50vw;
height: 50vw;
}
.text {
font-family: mansalva;
font-size: 2vw;
Width: 25ch;
}
[可行，但是如果线的宽度小于.container的宽度，则始终如此。否则，文本将像以前一样溢出或换行。
这是一个糟糕的解决方案，因为您需要手动测试每个段落和div和字体，也许还要测试不同的短语，因为黑色空格不算作ch单位。
我会坚持选择答案，希望有人能想到一个更好的解决方案。