文字の装飾
paint-order
paint-order は、文字や SVG の図形を描くときに、塗り・線・印（marker）をどの順で重ねるかを決めます。-webkit-text-stroke の縁取りを塗りの下に回すと、文字を細らせずに外側だけを縁取れます。
構文
normal | [ fill || stroke || markers ]プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
-webkit-text-stroke: 0.12em #eaac3a;
paint-order: stroke;
}コントロール
paint-orderstroke
最初に描くもの
その次に描くもの
描く順：stroke → fill → markers
解説
値の書き方
normal：初期値です。塗り（fill）、線（stroke）、印（markers）の順に描きます。あとに描いたものが上に重なります。fill・stroke・markersを空白で区切り、描く順に並べます。書かなかったものは、そのあとに初期の順で描きます。たとえばstrokeはstroke fill markersと同じです。同じものを 2 度は書けません。
よく使う場面
写真や模様の上に置いた見出しを縁取りで読みやすくするときに、-webkit-text-stroke と組み合わせて paint-order: stroke と書きます。線は文字の輪郭を中心に内と外へ半分ずつ引かれるので、初期値では内側の半分が塗りに重なって文字が細ります。線を先に描くと内側の半分が塗りに隠れ、外側の半分だけが見えます。見える縁取りは書いた太さの半分になるので、太めに書きます。
プレビューでは、文字に 0.12em の縁取り（-webkit-text-stroke）を付けています。
気をつけること
- HTML の文字の縁取りに効くのは Chrome・Edge 123、Firefox 60、Safari 11 からです。それより前の Chrome・Edge と Safari では、SVG の図形と文字にだけ効きます。
markersは、SVG の path や line などに marker-start などで付けた矢印などの印です。HTML の文字には印が無いので、順番を変えても見た目は変わりません。