サイトの残りの部分のデザインと一致させるために、ヘッダー テキストに 3 ピクセルのストロークを適用したいと考えています。また、保守性とオーバーヘッドという 2 つの理由から、これには画像を使用しないことをお勧めします。
このプロパティを使用できることは承知してtext-stroke
いますが、幅広いブラウザをサポートしていないようです: http://caniuse.com/text-stroke
私が知っている他の方法は、次のtext-shadow
ように使用することです:
text-shadow: -3px -3px 0 #d3d3d3, 3px -3px 0 #d3d3d3, -3px 3px 0 #d3d3d3, 3px 3px 0 #d3d3d3;
ただし、この jsfiddle でわかるように、この方法ではグリフの周りに実線が表示されません: http://jsfiddle.net/mdcwy/
オーバーヘッドがほとんどないテキストの周りに見栄えの良い 3px ストロークを追加する信頼できる単一の方法はありますか? JavaScript/jQuery ライブラリを使用してもかまいませんが、画像は使用したくありません。