大阪府堺市のWEB制作(ホームページ制作)事務所です

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

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

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



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

縁取りテスト

縁取りテスト

縁取りテスト


縁取りテスト

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


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

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

text-shadowを使う方法:縁取りが外側につきます

縁取りテスト

縁取りテスト

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

縁取りテスト

縁取りテスト

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

縁取りテスト

縁取りテスト

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

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


スポンサーリンク

コメントを残す