[CSS]スタイルシートでフォントに縁取りをしたい
最終更新日:2022.05.23 [月] 公開日:2018.09.26 [水] カテゴリー:html・CSS・jQuery・JS備忘
画像を使わずに、スタイルシートで文字に縁取りをしたい・・・という時のために。
text-strokeを使う方法:縁取りが内側につきます
縁取りテスト
↑
縁取りテスト
縁取りテスト
↑
縁取りテスト
これ、皆さんどんなふうに見えたでしょうか??
私の方の環境ではこんなんです。
このように、縁取りがフォントの内側につきます。
フォントによっては細く見えてしまって、見にくいかもしれません。
この辺りは好みもあると思うのですが、私は外につけたい派です。
text-shadowを使う方法:縁取りが外側につきます
縁取りテスト
↑
縁取りテスト
ちょい薄いな。
ってことで、めっちゃ重ねて書きます。
縁取りテスト
↑
縁取りテスト
コードがすごいことになりましたね。
でも、フォントは見やすい気がします。
縁取りテスト
↑
縁取りテスト
こっちのほうが、ちょっとした調整で色々ニュアンスは変えられるかも??
「#f00 1px 1px 1px」この部分を調整しつつ繰り返し重ねたりで、濃さが変わったりします。
表現したいのに合わせて色々試してみるといいかもしれません。
もっと良い方法があるかもしれないのですが、とりあえずこんな感じで。
コメントを残す
コメントを投稿するにはログインしてください。