CSS | テキストの文字を太字にする方法

2022-01-23CSS テキスト,CSS

CSSでテキストの文字を太字にする方法で「font-weight」を使ったパターンと「text-stroke」を使ったパターンを紹介しています。

テキストの文字を太字にする

テキストの文字を太字にする表示サンプルとCSSのサンプルコードになります。

See the Pen CSS | Hide text overhang by yochans (@yochans) on CodePen.

太字にしたい対象のテキストにpタグ、class名に「.text」を指定しています。

<p class="text">ONE NOTES</p>

CSSで文字を太字にするには「font-weight」プロパティに「bold」を指定する方法が一番一般的な指定方法になるかと思います。

.text {
	font-size: 50px;
	font-weight: bold;
	color: #4169e1;
}

「font-weight」には他にも指定可能な値がありますが、更に太くしたい場合は「text-stroke」プロパティを使って文字色と同じ色の縁取りを付ける方が簡単です。

「text-stroke」プロパティは現在「-webkit-text-stroke」としてベンダープレフィックスで指定する必要があります。

「-webkit-text-stroke」はIEを除く主要ブラウザで機能します。

.text {
	font-size: 50px;
	font-weight: bold;
	color: #4169e1;
	-webkit-text-stroke: 4px #4169e1;
}