Почему шрифт не становится жирным на айфоне?

Question

[DaniilPo]

С андройда:

spoiler

С айфона:

spoiler

шрифт:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@500;700&display=swap" rel="stylesheet">

Почему такая колоссальная разница и как это исправить?

Comments

[fallus]

Если вкратце, то потому что Safari — IE 2.0

[DaniilPo]

fallus, окей спасибо, а если не вкратце и как это исправить?

[Ankhena]

DaniilPo, вы показали только подключение шрифтов. А стилей не показали.
А еще лучше песочницу.
И скрин с айфона в нормальном качестве сделайте, пожалуйста.

[DaniilPo]

Ankhena,
Вот стили текстов:

.text_third {
		margin-top: -3vw;
		margin-left: 8vw;
		width: 85vw;
		font-size: 5vw;
		text-align: center;
		opacity: 0;
    font-family: 'Darker Grotesque', sans-serif;
    font-weight: bold;
	}
	.text_second {
		margin-top: 106vw;
		margin-left: 25vw;
		width: 48vw;
		position: absolute;
		font-size: 4vw;
		opacity: 0;
    font-family: 'Darker Grotesque', sans-serif;
	}
.text_first {
		position: absolute;
		margin-top: 27.12vw;
		margin-left: 34vw;
		width: 68vw;
		font-size: 4vw;
		opacity: 0;
    font-family: 'Darker Grotesque', sans-serif;
	}

Нового скриншота на данный момент сделать не могу но по моему спокойной можно понять что крайне плохо отображается жирный текст

[Ankhena]

DaniilPo, в этих стилях нет свойств font-family и font-weight.
Больше того, в них есть opacity: 0;, так что удивительно, что они вообще где-то отображаются.

[DaniilPo]

Ankhena, opacity:0; - нужно для анимации
извините я отправил стиль под телефоны, font-family и font-weight у меня объявлены(в коде выше я их добавил для наглядности, извините).

[Ankhena]

DaniilPo, опять же скрин нечеткий, поэтому сложно понять что именно происходит с шрифтом. Но по тому что можно разглядеть, кажется, что жирность там присутствует.
Возможно, дело в нецелых размерах шрифта.
Можно пробовать -webkit-font-smoothing: antialiased (или наоборот отключить, если стоит и проверить)
https://habr.com/ru/post/122269/