Div 和 vw 单位的文本不会在 Safari 中一起调整大小

Question

我有一个 50vw 的 Div，里面有一个字体为 2vw 的文本段落。根据 window 大小，单词的位置有很大不同。在 Chrome 中，它们都保持相同的比例，但在 Safari 中，布局被破坏了。我无法控制每个用户的浏览器，但我需要保留布局。

我得到不同字体的不同增长率。有些像 Arial 几乎会留在原地，但自定义字体（来自 google-字体）在调整大小时会经历增长步骤（宽度或高度跳跃，但不会同时跳跃）。我想问题出在字体属性中。

此外，我检查了字体以查看计算出的像素，并确定字体在经过任何 .5 像素单位（如 15.5 像素或 17.5 像素）时会跳跃。我怀疑 Safari 像素渲染。这可以是overriden/controled吗？

我尝试过子像素抗锯齿、字体平滑，也尝试过字体功能设置，但最后一个我不太明白它是如何工作的。

<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 中调整浏览器宽度，您会看到文字在行间跳动，即不保持比例

Answer 1

您使用的是 windows 还是 mac？ windows 上的 Safari 已经过时，很少有人使用它而不用担心它。

Answer 2

在寻找解决方案一周后，遇到了最简单的事情。这不是一个很好的解决方案，但它是一个解决方案。如果我将段落宽度设置为有限的字符数：

.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 单位。

我会保留select答案，希望有人能想到更好的解决方案。

Div 和 vw 单位的文本不会在 Safari 中一起调整大小

Div and text in vw units dont resize together in Safari

css

fonts

safari

fluid-layout

viewport-units