Сделайте узкие символы с помощью CSS

Question

Как уменьшить ширину символов Arial-подобных шрифтов с помощью CSS?

Answer 1

Используйте узкие шрифты в декларации семейства шрифтов. Это довольно часто.

font-family: "Helvetica Narrow","Arial Narrow",Tahoma,Arial,Helvetica,sans-serif;

Answer 2

Вы не можете уменьшить ширину символа, но вы можете уменьшить расстояние между буквами.

span {
 letter-spacing: 0px;
}

Answer 3

Расширение шрифта будет возможно с помощью свойства font-stretch CSS 3 .

Answer 4

Вы можете просто масштабировать свой текст. Например:

.my-text {
    transform: scaleX(0.5);
}

, но остерегайтесь transform-origin, который может заставить ваш текст перемещаться в другое место (например, если вы масштабируете его с центром в центре).

Answer 5

вы можете использовать font-weight: в вашем коде CSS для этого

Answer 6

Вы можете попробовать использовать свойство CSS * font-stretch :

font-stretch: condensed;

Поддержка браузера, по-видимому, ограничена - см., Например, комментарии к этому другому ответу - но у меня это сработало в Firefox 61.