CSSでの文字の縁取りの方法【現役エンジニアが解説】
今回は、CSSでの文字の縁取りの方法について、3つのパターンに分け、簡単に解説していきます。
text-shadow
text-shadowプロパティで縁取り可能です。
text-shadowプロパティで上下左右に影を付けることで表現します。
.hoge{
font-size:40px;
color:#000000;
text-shadow:1px 1px 0 #FFF, -1px -1px 0 #ffffff,
-1px 1px 0 #FFF, 1px -1px 0 #ffffff,
0px 1px 0 #FFF, 0-1px 0 #ffffff,
-1px 0 0 #FFF, 1px 0 0 #ffffff;
}
上記のコードでは、hogeのクラスの要素の文字を40ピクセルで縁取り文字として表示しています。
text-stroke(IE以外)
text-strokeプロパティで文字の内外に縁を付けられます。
ただし、text-strokeプロパティはIEは未対応のため、注意が必要です。
.hoge{
font-size:40px;
color:#000000;
text-stroke:1px #ffffff;
-webkit-text-stroke:1px #ffffff;
}
上記のコードでは、hogeというクラスを持つ要素の文字を40ピクセルで縁取り文字として表示しています。
SVGとCSSによる縁取り
SVGのtext要素のプロパティのstrokeとstroke-widthでも縁取れます。
strokeプロパティには縁の色を指定し、stroke-widthプロパティには縁の太さを指定します。
<svg style="zoom:1.5;">
<text x="10" y="50" style="font-size:40px;stroke:#ffffff;stroke-width:8;stroke-linejoin:round;">ほげ</text>
<text x="10" y="50" style="font-size:40px;fill:#000000;stroke-linejoin:round;">ほげ</text>
</svg>
上記のコードでは、SVGを使って、ほげという文字を、文字サイズが40ピクセルの縁取り文字として表示しています。