FirefoxでのテキストのストロークとシャドウCSS3

Question

ストロークとシャドーをテキストに追加する方法があるのか​​どうか疑問に思っていましたが、Webkitがテキストストロークとテキストシャドーをサポートしているので、ChromeとSafariで機能させることができます。私はFirefoxで表示するストロークを得ることができますが、それはテキストシャドーを使用し、オフセットで再生しています。だから誰もこの問題を回避する方法を知っている。

Answer 1

text-strokeプロパティは標準CSS仕様の一部ではありませんので、避けることをお勧めします - Chromeはいつでも引き出しが可能です。

あなたはカンマで区切った複数のtext-shadow Sを使用してtext-stroke様な効果を作成できることだね - 実際にあなたにも「実際の」影を追加するには、同じ技術を使用することができますして

h1 { 
    font-size: 100px; 
    font-weight: bold; 
    text-shadow: 1px 1px 0 #F00, -1px -1px 0 #F00, 1px -1px 0 #F00, 
      -1px 1px 0 #F00, 3px 3px 5px #333; 
}​ 

をIE9以下ではtext-shadowがサポートされていないため注意してください。私は非本質的なスタイリングのためだけにそれを使用することをお勧めしたい：シャドウ/偽の輪郭がそこにないときにテキストがまだ読めるようにしてください。

Answer 2

のFirefox 48は、テキストのストローク（と-webkitプレフィックス）ならびに（-webkit-text-fill-colorのような）いくつかの他のWebKit固有のプロパティをサポートしています。仕様が実際には存在しないことにちょうど注意してください。おそらく将来変更されるでしょう。ここで

は今のFirefoxで動作する例を示します

.outline { 
 
    -webkit-text-stroke: 1px red; 
 
} 
 

 
span:first-of-type { 
 
    display: block; 
 
    font-size: 24pt; 
 
    font-weight: bold; 
 
}

<span class="outline">This text has a stroke.</span> 
 
<span class="outline">(Even in Firefox)</span>

は、MozillaのWebサイトを参照してください。

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke