[css]文字にアウトライン付ける方法

知らなかった。

こんな感じ

<p class="outlone">あああああああああああああああ</p>

p.outline{
    -webkit-text-stroke: 3px #333;
    text-stroke: 3px #333;
    paint-order: stroke fill;
}

text-strokeで線をつける。

text-strokeだけだと文字の内側にも線が入る（パーツごとにアウトラインがつく）ことがあるので、それが良いなら良いけど良くない場合は非常に良くない。
それに文字の外周の内側につくから、身の部分が細くなって潰れちゃうリスクがある。

「paint-order: stroke fill;」とすることで、文字の外周に線が引かれるようになる。
イラレとかのアウトラインと同じ感じになる。

-webkit-text-stroke – CSS | MDN

-webkit-text-stroke は CSS のプロパティで、テキスト文字の輪郭線の幅と色を指定します。これは個別指定プロパティ -webkit-text-stroke-width および -webkit-text-stroke-co…

developer.mozilla.org

paint-order – CSS | MDN

paint-order は CSS のプロパティで、テキストコンテンツやシェイプが描画されるときの塗りつぶしと輪郭 (およびマーカーの描画) の順序を制御することができます。

developer.mozilla.org

cssで凝った装飾ができるようになってますね。