Несоответствие отображения шрифта Raleway регуляр
У меня есть макет с текстом, и, судя по Figma, используется шрифт Raleway Regular. Я импортировал его с Google Fonts в проект и задал тексту все свойства, которые вижу в макете. Однако на макете номер телефона отображается ровно, цифры не прыгают, а в моём случае они смещаются.
Прикрепляю скриншоты: первый - это то, что я вижу у себя; второй - как должно быть в макете.
Как реализован текст
- Текст выполнен с помощью тега
<a>с атрибутомhref="tel:...". - Свойства
font-size,font-familyиfont-weightзаданы в CSS согласно макету.
Вопрос
Что делать с этим расхождением?
Возможные причины и решения
- Проверьте кернинг и межбуквенный интервал: в Figma могли быть заданы нестандартные значения
letter-spacingилиkerning. - Убедитесь, что импорт шрифта корректен: проверьте, что вы используете именно ту версию Raleway, которая указана в макете (например, конкретный вес и начертание).
- Используйте
font-variant-numeric: добавьте свойствоfont-variant-numeric: tabular-numsдля выравнивания цифр по ширине. - Сравните рендеринг: откройте макет и ваш проект в одном браузере, чтобы исключить различия в движках рендеринга.
- Проверьте line-height: в Figma мог быть задан нестандартный межстрочный интервал, который влияет на вертикальное выравнивание.