У меня есть Div с 50vw, и текстовый абзац внутри с шрифтом 2vw. В зависимости от размера окна положение слов очень различно. В Chrome они оба сохраняют одинаковое соотношение, но в Safari макет нарушается. Я не могу управлять браузером каждого пользователя, но мне нужно сохранить макет.
Я получаю разные темпы роста для разных шрифтов. Некоторые, такие как Arial, практически останутся на месте, но пользовательские (из google-шрифтов) переносят шаги в росте (скачки ширины или высоты, но не оба вместе) при изменении размера. Я предполагаю, что проблема заключается в свойствах шрифта.
Кроме того, я проверил шрифт, чтобы увидеть вычисленные пиксели, и определил, что шрифт перепрыгивает при прохождении через любую единицу .5 px (например, 15,5px или 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, вы увидите, что слова прыгают между строками, т.е. несохраняя соотношение