[CSS]スタイルシートでフォントに縁取りをしたい

最終更新日：2022.05.23 [月]　公開日：2018.09.26 [水]　カテゴリー：html・CSS・jQuery・JS備忘

画像を使わずに、スタイルシートで文字に縁取りをしたい・・・という時のために。

Contents

text-strokeを使う方法：縁取りが内側につきます

縁取りテスト

↑

縁取りテスト

↑

縁取りテスト

これ、皆さんどんなふうに見えたでしょうか？？
私の方の環境ではこんなんです。

このように、縁取りがフォントの内側につきます。
フォントによっては細く見えてしまって、見にくいかもしれません。

この辺りは好みもあると思うのですが、私は外につけたい派です。

縁取りテスト

↑

縁取りテスト

ちょい薄いな。
ってことで、めっちゃ重ねて書きます。

縁取りテスト

↑

縁取りテスト

コードがすごいことになりましたね。
でも、フォントは見やすい気がします。

縁取りテスト

↑

縁取りテスト

こっちのほうが、ちょっとした調整で色々ニュアンスは変えられるかも？？
「#f00 1px 1px 1px」この部分を調整しつつ繰り返し重ねたりで、濃さが変わったりします。

表現したいのに合わせて色々試してみるといいかもしれません。
もっと良い方法があるかもしれないのですが、とりあえずこんな感じで。