問題
テキストをfont-weight以外で太らせるには？
解決策
「text-shadow」でテキストと同じ色でぼかしなしで0.1pxずつずらして4つ分重ねます。
テキストをさらに太らせる。
テキストを太字にしたい、太らせたい時、font-weightが効かない状況だったり、さらに太らせたい時のために、text-shadowでテキストを太らせる方法をご紹介します。
DEMOはこちら
このテキストはfont-weightによって太くしています。
このテキストがtext-shadowによってさらに太くなります。
HTMLはこちら
<p class="textweight">このテキストがtext-shadowによってさらに太くなります。</p>CSSはこちら
- 「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;
}
コメント