Как исправить растягивания шрифта?
Всем привет. Подскажите после переноса стилей из фигмы шрифт по сравнению с фигмой прыгает и при различных значениях он деформируется. Шрифт лицензия. В чем может быть проблема? Может ли он быть в том, как стили из фигмы применяются в верстке?
Шрифт не вариативный
Подключаю через @font-face
@font-face { font-family: "CoFoSans"; src: url(fonts/regular/CoFoSans-Regular.woff2); font-display: auto; font-weight: 400; } |
@font-face { font-family: "CoFoSans"; src: url(fonts/regular/CoFoSans-Regular.woff2); font-display: auto; font-weight: 400; }
Видео
Первый кадр это верстка и потом переключаюсь на фигму
Свойства применяемые в верстке:
color: #000; text-align: center; font-family: CoFoSans; font-size: 54px; font-weight: 900; line-height: 100%; font-feature-settings: 'calt' off, 'liga' off; |
color: #000; text-align: center; font-family: CoFoSans; font-size: 54px; font-weight: 900; line-height: 100%; font-feature-settings: 'calt' off, 'liga' off;
Проблема кроется не в самой фигме, а больше в сравнении с тем что представлено на основном сайте шрифта
Сайт
Символы деформируются
Дополнительно:
Попробуйте перечитать свой вопрос. Достаточно ли в нём информации, чтобы ответить на него?
Какой шрифт? Вариативный?
Как прыгает? Куда прыгает? Как он подключен?
как стили из фигмы применяются в верстке?
Какие стили? Как вы их применяете?
Сделайте пример.
Ответы:
Шрифт что на сайте выглядит так же как и в фигме?
Чем конвертили?
font-feature-settings пробовали убирать?
- Пробовал - не конвертил. Шрифт предоставила компания, что продает его. Она дала нам форматы woff2 и otf
- ReaperGermany, шрифт выглядит одинаково в фигме и на сайте продавца?
- drtvader, Да - мы получили ответ, что это хинтинг и они уже будут решать почему так происходит
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для исправления проблемы растягивания шрифта на веб-сайте, вам следует использовать единицы измерения шрифта, которые обеспечивают более стабильное отображение текста на различных устройствах и браузерах.
Одним из наиболее распространенных способов установки размера шрифта является использование относительных единиц измерения, таких как em, rem или проценты. Эти единицы позволяют шрифту масштабироваться в соответствии с размером родительского элемента или базового размера шрифта.
Например, для установки размера шрифта в пикселях вы можете использовать следующий CSS код:
body { font-size: 16px; } p { font-size: 1em; /* 1 em = 16px */ }
Если вы хотите использовать относительные единицы измерения, вы можете установить размер шрифта в процентах от базового размера шрифта:
body { font-size: 16px; } p { font-size: 100%; /* 100% от базового размера шрифта */ }
Также, рекомендуется избегать использования абсолютных единиц измерения, таких как px, для размера шрифта, так как они могут привести к проблемам с масштабированием на различных устройствах.
Используя правильные единицы измерения и методы установки размера шрифта, вы сможете исправить проблему растягивания шрифта и обеспечить более стабильное отображение текста на вашем веб-сайте.