以前は少し苦労して作った縁取り文字ですが、text-strokeにpain-orderプロパティを組み合わせると、CSSできれいに縁取り文字を表現することができます。
color: mintcream;
-webkit-text-stroke: 10px cadetblue;
paint-order: stroke;結果：
以前からもCSSで縁取り表現はできましたが、特にすこし太めの縁取りがうまくいきませんでした。
またtext-shadowを使う方法の場合、CSSの記述が煩雑でした。
以前：
←text-strokeのみ text-shadowを使う方法→
ただし、text-strokeにpain-orderプロパティを組み合わせる方法でも、太めの縁取りになるとトゲが出てきて気になるので、注意が必要そうです。
SEOやアクセシビリティを意識してWEBサイトを作る場合、なるべく文字は画像ではなくHTMLで対応したいところなので、活用していきたいですね。
参考
・CSSで縁取り文字を表現する方法 2024最新版
・CSSを使って縁取り文字を表現する方法 (デザインサンプル付き)！見出しのデザインの幅を広げる!!
