text-strokeとpaint-orderで縁取り文字や袋文字を表現する

text-strokeとpaint-orderを使うことで、いままで文字が潰れてしまっていた縁取り文字や袋文字がCSSだけで表現できるようになった。

<h1>HELLO WORLD</h1>

h1 {
  color: white;
  -webkit-text-stroke: 4px black;

  paint-order: stroke;
}

• -webkit-text-strokeは、テキストの輪郭線の幅と色を指定するショートハンドプロパティ
  • -webkit-text-stroke-width
  • -webkit-text-stroke-color
• paint-orderは、テキストコンテンツなどを描画するときの塗りつぶしの順番を制御するプロパティ
  • paint-order: stroke … 輪郭→塗りつぶしの順
  • paint-order: markers … マーカー→輪郭の順
  • 複数指定可能

デモ