У меня такая проблема:
![enter image description here](https://i.stack.imgur.com/BDwM9.png)
Вот как он отображается с display: block
или display: inline-block
.
Как мне сделать так, чтобы края черной части буквы определяли прямоугольник angular, и это то, что я использую для его расположения? Или, если это невозможно напрямую / легко, тогда ограничивающая рамка глифа шрифта. Как мне сделать так, чтобы глиф был визуально прямоугольником , избавившись от line-height
проблем и проблем с базовыми показателями?
Нужно ли мне писать текст в SVG или что-то в этом роде? Я хотел бы использовать шрифт Google Noto в формате ttf, но, возможно, это возможно только с использованием шрифта ttf с SVG.
Я хотел бы создать 4 уровня (по вертикали) текста: буква и какой-то подтекст в 3 слоя. Я хочу, чтобы все это было по центру, но чтобы он не выходил за границы страницы 100vh, у меня не может быть этой проблемы с такими странными и незнакомыми размерами фактических (т.е. синее поле нижняя часть находится в центре символа, а не является правильной ограничивающей рамкой).