テキストの縁取りをCSSで表現しようとすると、軽くググった感じだと
- text-shadowを重ねまくる
- text-strokeで縁取りしたあと、before要素で同じテキストを描画する
の２通りの方法が現時点での最適解というような記事がヒットします。
しかし、上記の方法だとReactなどでSPAを実装する際にちょっと面倒だし、
やはりスタイルのためにごちゃごちゃやらなきゃいけない感じが気持ち悪かったですね。
現時点で、もっとスッキリした書き方を見つけました。
それが下記です。
CSSで縁取り文字を表現する
{
-webkit-text-stroke: 2px black;
text-stroke: 2px black;
paint-order: stroke;
}
ポイントは paint-order です。
これを利用すると、テキストを描画するときの塗りつぶしと輪郭の順序を変更することができます。
つまり、輪郭線がテキストよりも後ろに描画されてくれるということです。
とってもシンプルで良い解決策だと思います。
サンプル
上記のスタイルで、ちょっと大げさに描画してみると下記のような感じになります。
すこし課題があるとすれば、記号や漢字など一部の文字の縁取りがトゲトゲした印象になっているくらいでしょうか。
ただ、text-shadowで表現するにしても影のつき方には一癖あるとおもうので、トゲトゲが気になるならspanで囲んでoverflow: hiddenしてはみ出しすぎたトゲを隠したりするほうがいいかな、と思います。
ブラウザ対応状況
text-stroke
https://caniuse.com/?search=text-stroke
paint-order
https://caniuse.com/mdn-css_properties_paint-order
どちらもIE以外は最新版対応済みです。気兼ねなく使えますね！