デバイスフォントにcssでふちどりテキストは現実的か
ふちどりテキストを画像じゃなくてcssで実装したい
ふちどりのあるタイトルテキスト、昔はよく画像で作ってたと思うんですが、スマホとか幅の狭いデバイスを考えると画像だと小さくなりすぎて読みにくい。
なのでやっぱりcssでやりたいなぁということで、ちょっと試してみました。
正統派 text-stroke
対応ブラウザの問題。
2015.10.20時点でwebkit系だけ。
そして使用できても、中の塗りの部分？が細くなって、テキストとして読みにくい。ほとんどstrokeみたいな感じ。
See the Pen Edging text - text-stroke(normal) by hiroaki tachibana (@eedamame) on CodePen.
font-weightをboldにしたり、フォントサイズを大きくするといい感じに見える。
が、やはりstrokeのwidthを1pxより大きくするとフォントの塗りの部分が細くなって見えづらいので、1pxを変えるのは難しそう。
See the Pen Edging text - text-stroke (large font) by hiroaki tachibana (@eedamame) on CodePen.
text-shadowで代用
ブラウザ対応を考えると、text-shadowを使った無理やりハックみたいなことをするのが無難。
ただ、尖っている角がある場合など、ジャギっているような感じになる。
text-shadowを四方に使って対応してるから、角のところがうまく処理できてないっぽい。
スマホで見た時特に、ボサボサっとした感じに見える。
けど、デスクトップで見た感じだと結構良さげ。
ふちどりの幅が大きくなってもきれいめ。
See the Pen Edging text - text-shadow by hiroaki tachibana (@eedamame) on CodePen.
同じテキストを複製して重ねて、text-stroke
after擬似要素などで同じテキストをつくって、positionなどで重ねる。
下にくるテキストにtext-strokeを指定する。
text-strokeの分だけ大きくなった部分がはみ出して見える。普通のフォント部分をちゃんと表示できる。
See the Pen Edging text - text-stroke by hiroaki tachibana (@eedamame) on CodePen.
うまくいったように思ったけど、strokeの幅を大きくしたら変なハネが出た。
ブラウザで見えないフォントのパスとかがあるんでしょうか。
上のように幅が小さい場合でも少し出てるがあんまりわからない。
See the Pen Edging text - wide stroke by hiroaki tachibana (@eedamame) on CodePen.
1文字ずつspanで括って、複製したテキストを重ねてscale
strokeを使ってイマイチならば、同じテキストを少し大きさを変えてかさねてしまえという強引な案。 結局中央から大きさを調整してるだけなので、外に向かっては大きくなったように見えるけど、内側へのふちどりはない。なので結局あまりふちどりを大きくとることができない。
ベースとなるほうの font-weight を bold にしてあるので、多少はそれっぽく見える。
もうちょっとうまくやればできそうだけど、これだと読むテキストを少し小さくしているので、文字間が開いてしまって気持ち悪い。
See the Pen edging text - scale by character by hiroaki tachibana (@eedamame) on CodePen.
とりあえずの結論
text-shadowでひかえめに。
スマホだけなど、text-strokeで問題ない環境であれば、font-sizeを大きめにしてtext-strokeで対応。
太めのふちどりは諦めましょう。その場合はやっぱり画像かな。
無理なことはしないのが良い。
完璧に綺麗なのはなさそうなので、その時の条件（フォントサイズはテキストの色、背景色などなど…）によって、OK出せるものも変わってきそう。
正直、自分はもうやりたくない。
text-strokeが使える場合のテキストカラーとしてfill-colorを指定し、使えない場合のテキストカラーとしてcolorで指定しておけば、ふちどりが表示できないから全然読めないという事態は避けられるので、自分の責任の範疇で使ってみるのもアリかもしれないというですね。