Make narrow characters with CSS

问题

How do I reduce characters' width of Arial-like fonts with CSS?

回答1:

You can't reduce character width, but you can reduce letter-spacing.

span {
 letter-spacing: 0px;
}

回答2:

Use narrow fonts in your font-family declaration. These are pretty common.

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

回答3:

Streching a font will be possible with the font-stretch property of CSS 3.

回答4:

You can just scale your text. For instance:

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

but beware of transform-origin which can make your text move elsewhere (for example if you scale it with an origin at its center).

回答5:

you can use font-weight: in your css code for this

回答6:

You can try to use the font-stretch CSS property:

font-stretch: condensed;

Browser support seems to be limited – see e.g. the comments to this other answer – but it worked for me in Firefox 61.

来源：https://stackoverflow.com/questions/1161242/make-narrow-characters-with-css