3

サイトの残りの部分のデザインと一致させるために、ヘッダー テキストに 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 ライブラリを使用してもかまいませんが、画像は使用したくありません。

4

2 に答える 2