[CSS]スタイルシートでフォントに縁取りをしたい
最終更新日：2021.10.01 [金] 公開日：2018.09.26 [水] カテゴリー：html・CSS・JS備忘
画像を使わずに、スタイルシートで文字に縁取りをしたい・・・という時のために。
text-strokeを使う方法：縁取りが内側につきます
縁取りテスト
↑
|
1 2 3 4 5 6 |
<p style=" -webkit-text-stroke: 2px #f00; font-size:40px;color:#fff; font-weight:bold;"> 縁取りテスト </p> |
縁取りテスト
↑
|
1 2 3 4 5 6 7 8 |
<p style=" -webkit-text-stroke-width: 2px;-webkit-text-stroke-color: #000; font-size:40px; color:#fff; font-weight:bold;"> 縁取りテスト </p> |
これ、皆さんどんなふうに見えたでしょうか？？
私の方の環境ではこんなんです。
このように、縁取りがフォントの内側につきます。
フォントによっては細く見えてしまって、見にくいかもしれません。
この辺りは好みもあると思うのですが、私は外につけたい派です。
text-shadowを使う方法：縁取りが外側につきます
縁取りテスト
↑
|
1 2 3 4 5 6 |
<p style=" text-shadow: #f00 0px 0 2px; font-size:40px;color:#fff; font-weight:bold;"> 縁取りテスト </p> |
ちょい薄いな。
ってことで、めっちゃ重ねて書きます。
縁取りテスト
↑
|
1 2 3 4 5 6 |
<p style=" text-shadow: #f00 0px 0 2px,#f00 0px 0 2px,#f00 0px 0 2px,#f00 0px 0 2px,#f00 0px 0 2px,#f00 0px 0 2px,#f00 0px 0 2px,#f00 0px 0 2px,#f00 0px 0 2px,#f00 0px 0 2px,#f00 0px 0 2px,#f00 0px 0 2px,#f00 0px 0 2px,#f00 0px 0 2px,#f00 0px 0 2px,#f00 0px 0 2px,#f00 0px 0 2px,#f00 0px 0 2px; font-size:40px;color:#fff; font-weight:bold;"> 縁取りテスト </p> |
コードがすごいことになりましたね。
でも、フォントは見やすい気がします。
縁取りテスト
↑
|
1 2 3 4 5 |
<p style=" text-shadow: #f00 1px 1px 1px,#f00 -1px 1px 1px,#f00 -1px -1px 1px,#f00 1px -1px 1px,#f00 0px 0px 1px; font-size:40px; color:#fff; font-weight:bold;">縁取りテスト</p> |
こっちのほうが、ちょっとした調整で色々ニュアンスは変えられるかも？？
「#f00 1px 1px 1px」この部分を調整しつつ繰り返し重ねたりで、濃さが変わったりします。
表現したいのに合わせて色々試してみるといいかもしれません。
もっと良い方法があるかもしれないのですが、とりあえずこんな感じで。
コメントを残す