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

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

转载作者：行者123 更新时间：2023-11-27 23:16:45

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

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

此外，我还检查了字体以查看计算出的像素，并确定字体在经过任何 .5 像素单位(如 15.5 像素或 17.5 像素)时会跳跃。我怀疑 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 已经过时，很少有人使用它而不用担心它。

关于css - vw 单位中的 Div 和文本不会在 Safari 中一起调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58234899/