問題 × 解決策

text-shadowでテキストを太らせる方法

問題

テキストをfont-weight以外で太らせるには?

解決策

「text-shadow」でテキストと同じ色でぼかしなしで0.1pxずつずらして4つ分重ねます。

 

テキストをさらに太らせる。

テキストを太字にしたい、太らせたい時、font-weightが効かない状況だったり、さらに太らせたい時のために、text-shadowでテキストを太らせる方法をご紹介します。

DEMOはこちら

このテキストはfont-weightによって太くしています。

このテキストがtext-shadowによってさらに太くなります。

HTMLはこちら

<p class="textweight">このテキストがtext-shadowによってさらに太くなります。</p>

CSSはこちら

  1. text-shadow」で0.1pxずつずらして4つ分重ねます
.textweight{
	color: #F15A24;
	font-weight: bold;
	text-shadow: 0.1px 0.1px 0 #F15A24, 0.1px -0.1px 0 #F15A24, -0.1px 0.1px 0 #F15A24, -0.1px -0.1px 0 #F15A24;
	-webkit-text-shadow: 0.1px 0.1px 0 #F15A24, 0.1px -0.1px 0 #F15A24, -0.1px 0.1px 0 #F15A24, -0.1px -0.1px 0 #F15A24;
	-moz-text-shadow: 0.1px 0.1px 0 #F15A24, 0.1px -0.1px 0 #F15A24, -0.1px 0.1px 0 #F15A24, -0.1px -0.1px 0 #F15A24;
	-o-text-shadow: 0.1px 0.1px 0 #F15A24, 0.1px -0.1px 0 #F15A24, -0.1px 0.1px 0 #F15A24, -0.1px -0.1px 0 #F15A24;
	-ms-text-shadow: 0.1px 0.1px 0 #F15A24, 0.1px -0.1px 0 #F15A24, -0.1px 0.1px 0 #F15A24, -0.1px -0.1px 0 #F15A24;
}

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

nine + 2 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧