webdevqa.jp.net

CSSで狭い文字を作成する

CSSでArial風のフォントの文字幅を縮小するにはどうすればよいですか?

29
Alex

文字幅を減らすことはできませんが、文字間隔を減らすことはできます。

span {
 letter-spacing: 0px;
}
25
Mike Robinson

フォントファミリ宣言で狭いフォントを使用します。これらはかなり一般的です。

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

25
MM.

CSS 3の font-stretchプロパティ を使用すると、フォントのストレッチが可能になります。

17
Gumbo

テキストを拡大縮小できます。例えば:

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

ただし、transform-Originテキストを他の場所に移動させることができます(たとえば、Originを中心に拡大縮小する場合)。

11
Javarome

このためにCSSコードでfont-weight:を使用できます

1
Zero

font-stretch CSS property を使用してみてください:

font-stretch: condensed;

ブラウザのサポートは制限されているようです。 このもう1つの答え へのコメントですが、Firefox 61でうまくいきました。

0
oberlies