Как правильно трансформировать шрифт?

Question

[rootnoroot]

В общем дизайнеры как обычно нафигачат хераборы в своей фигме, а ты потом с ума сходи))
В общем, по дефолту шрифт выглядит так

в фигме он трансформирован, выглядит вот так

даю трансформацию

transform-origin: 0 0;
transform: scaleX(3);

получается вот такое

Вся проблема в том, что самому блоку хоть и пытаюсь задать размеры, но он все ровно уходит вправо непонятно на какое расстояние
пока спасаюсь тем, что даю body overflow-x hidden, т.к появляется горизонтальная полоса прокрутки
но что то не всегда срабатывает
Может я не правильно делаю саму трансформацию?
Подскажите пожалуйста как правильно сделать

Comments

[drtvader]

А фигма в стилях что пишет?

[rootnoroot]

drtvader, по трансформации ничего

position: absolute;
width: 433px;
height: 45px;
left: 202.08px;
top: 3339.81px;
font-family: 'Druk Wide Cyr';
font-style: normal;
font-weight: 700;
font-size: 34px;
line-height: 45px;
text-transform: uppercase;
color: #FFFFFF;

[Lynn «Кофеман»]

А вы уверены что трансформировали, а не взяли другой шрифт? Вообще то у него есть версия Druk Wide https://commercialtype.com/uploads/3200032/1507575...

[rootnoroot]

Lynn «Кофеман», а это уже интересно и не понятно если честно
а как эти шрифты вытянуть с фигмы можно?
т.к качал с 2х разных сайтов, то они вот такого вида

[Lynn «Кофеман»]

rootnoroot, эм, попросить заказчика купить шрифт.ну или выдать если он уже куплен.

[drtvader]

rootnoroot, дизайнер должен кинуть шрифты что использовал.

[rootnoroot]

Lynn «Кофеман», Блин Спасибо Вам большое!
это шрифт а не трансформация оказывается
они разные в сети под одним названием, только что нашел такой же шрифт
А я мучаюсь сижу с этими трансформациями

Связи с дизайнером у меня нет
он тупо в фигме фигачит что попало потом кидают мне на верстку

Answer 1

[Сергей delphinpro]

Оберните текст в отдельный блок внутри блока. и его трансформируйте

<div>
  <span>text</span>
</div>

span { transform: }

Тогда не весь блок будет увеличиваться втрое, а только текст. Ну и он должен быть инлайн, чтобы лишней ширины не забирал.

Comments

[rootnoroot]

Так есть див title, задал ему overflow hidden
а в нем уже стоят div элементы, которым трансформацию и задал

а вот на счет inline, если им даю это свойство, то transform на них не действует вообще

[Сергей delphinpro]

rootnoroot, а inline-block?