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

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

Pocket
Facebook にシェア
LINEで送る

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



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

縁取りテスト

縁取りテスト

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


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

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

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

縁取りテスト

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

縁取りテスト

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

縁取りテスト

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

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


スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA