Text stroke and fill (compatibility prefixes)

概要

これらの互換性プレフィックス付きプロパティにより、テキストにストローク（輪郭線）効果を追加したり、塗りつぶし色を変更できます。タイトルやヒーローテキストの装飾的な表現に使用されます。すべての主要ブラウザで -webkit- プレフィックス付きで利用可能です。

対応ブラウザ

基本構文

.outlined-text {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #333;
  -webkit-text-fill-color: transparent;
}

実務での使いどころ

• アウトラインテキスト

  ヒーローセクションの見出しにストローク効果を適用し、背景画像の上でも読みやすいデザインを作成します。

注意点

アクセシビリティ

• 透明な塗りつぶしのアウトラインテキストはコントラストが低くなりがちなため、十分なストローク幅と色のコントラストを確保してください。

参考リンク

• MDN Web Docs — Text stroke and fill (compatibility prefixes)
• Can I use — Text stroke and fill (compatibility prefixes)