【CSS】paint-orderプロパティで縁取り文字調整

どうも、くまだです。

paint-orderプロパティで縁取り文字の調整について。

paint-orderプロパティ

HTMLとCSSで縁取り文字を表現する場合、text-strokeを使います。

 <p>テキスト</p>

p {
    color: white;
    -webkit-text-stroke: 2px #000;
    font-size: 32px;
}

しかし、text-strokeプロパティだけだと、場合によっては文字がつぶれてしまうことがあります。

paint-orderプロパティを使うと、テキストの枠線と塗りの順番を入れ替えていい感じに表現してくれます。

p {
    paint-order: stroke fill; /* 追記 */

    color: white;
    -webkit-text-stroke: 2px #000;
    font-size: 32px;
}

このようにpaint-orderプロパティは、テキストの輪郭や塗りつぶし、マーカーなどの順序を制御するプロパティになります。

paint-orderプロパティは以下の値を取ることができます。

paint-orderプロパティは以下のように複数の値を設定できます。

paint-order: markers stroke fill; /* マーカー→輪郭→塗りつぶしの順になる */

text-strokeだけ使っててなんか文字がつぶれてるな…と思ったらpaint-orderプロパティで調整してみるといいかもしれません。

ここまで読んでくださりありがとうございました。