Здравствуйте. У меня странная проблема которую я долго не могу решить. Решил написать доступный в Figma шаблон с использованием Vite. Всё идёт как надо да вот только отображение шрифта сильно отличается от того что показывает Figma. Шрифт Roboto. Как в настольной, так и в браузерной версии редактора он именно Roboto. Подключен в HTML именно этот шрифт. И браузер видит шрифт как Roboto. А именно sans-serif. Но отличия слишком заметны. И высота, и толщина, и начертания. Вот примеры:
Это шрифт браузера.
А это шрифт шаблона.
Подогнать за счёт настроек шрифтов, межстрочного расстояния, пробелов между буквами получается только примерно, из за чего результат на шаблон похож только приблизительно. И выглядит ощутимо хуже. И я пытался подключать шрифты как в CSS:
/*@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;600;700;900&display=swap');*/
:root {
--cards_columns: 3;
--buttom_color: linear-gradient(to right, #F9804B, #FE9013);
--buttom_color_reverse: linear-gradient(to right, #F9804B , #FE9013 70%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 1600px;
margin: 0 auto;
display: grid;
grid-template-rows: 80px 700px auto 443px;
font-family: 'Roboto', sans-serif;
}
Так и в HTML(как он у меня сейчас подключен):
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Online-zoo</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;600;700;900&display=swap" rel="stylesheet">
</head>
Результат одинаковый. И повторюсь, браузер пишет в консоли разработчика правильный шрифт. Что я делаю не так? И как фронт-эндеры поступают в подобных ситуациях когда выхода не находится, если такое бывает?
Средний
