Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

Text stroke and fill (compatibility prefixes)

-webkit-text-fill-color は CSS のプロパティで、テキストの文字の塗りつぶしの色を指定します。このプロパティが設定されていない場合、 color プロパティの値が使用されます。

css

/* <color> 値 */ -webkit-text-fill-color: red; -webkit-text-fill-color: #000000; -webkit-text-fill-color: rgb(100, 200, 0);

/* グローバル値 */ -webkit-text-fill-color: inherit; -webkit-text-fill-color: initial; -webkit-text-fill-color: unset;

テキスト装飾アウトライン

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`-webkit-text-fill-color`	1	12	49	3	18	2
その他
`css.properties.-webkit-text-stroke` -webkit-text-stroke は CSS のプロパティで、テキスト文字の輪郭線の幅と色を指定します。これは個別指定プロパティ -webkit-text-stroke-width および -webkit-text-stroke-color の一括指定プロパティです。	4	15	49	3	18	2
`css.properties.-webkit-text-stroke-color` -webkit-text-stroke-color は CSS のプロパティで、テキストの文字の線の色を示します。このプロパティが設定されない場合、 color プロパティの値が使用されます。	1	15	49	3	18	2
`css.properties.-webkit-text-stroke-width` -webkit-text-stroke-width は CSS のプロパティで、テキストの線の太さを指定します。	1	15	49	3	18	2

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

CSS

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

CSS outlinetext demo.

CSS thickstro-k demo.

CSS Gradientcharacter demo.