CSSを使って縁取り文字を作成する2つの方法【CSS】

上記のように文字が縁取りされていますが、文字サイズが小さかったり、線が太い場合には文字が潰れて見えてしまいますので注意してください。また、 CSSのベンダープレフィックス「 -webkit-text-stroke 」の指定は必須となりますので注意してください。その他、IEなど旧ブラウザには対応しておりません。 text-stroke プロパティの対応状況はこちら(Can I Use)で確認できます。

text-shadowプロパティを使用する方法

次に、 text-shadow プロパティを使用する方法です。まずは以下のコードをご覧ください。

先程の text-stroke プロパティとは違い文字が太く見えるかと思います。 text-stroke プロパティは文字輪郭の外側と内側の両方に線が付く為少し細く見えますが、 text-shadow プロパティで今回指定したのは文字の外側になりますので違って見えます。

text-shadow プロパティで縁取る場合の注意点としては、線を太くすると以下のように線がギザギザしてしまいます。

📎📎📎📎📎📎📎📎📎📎