文字に縁取りをつけた袋文字のつくりかたの紹介です。

今回はCSSでpaint-orderと-webkit-text-strokeのプロパティを指定して実装しています。

デモページは、こちら

↓以下が実際のソースサンプルです。

▼HTML

<span class="outlinecharacter">
袋にしたい文字
</span>

▼CSS

.outlinecharacter {
color: #ffffff; /* ←袋文字の中の色 */
paint-order: stroke fill;
-webkit-text-stroke: 4px #ff0000; /* ←袋文字の縁取りの太さと色 */
}

今回、参考にさせていただいたのは、
『縁取り文字はCSSのtext-strokeで可能。（非推奨の時代は終わり。） – いがわ』さん、
『-webkit-text-stroke-color – MDN』さんです。
ありがとうございます。