फ़ायरफ़ॉक्स में टेक्स्ट स्ट्रोक और छाया CSS3

Question

अरे दोस्तों मैं सोच रहा था कि पाठ में स्ट्रोक और छाया जोड़ने का कोई तरीका था, तो मैं इसे क्रोम और सफारी में काम कर सकता हूं क्योंकि वेबकिट टेक्स्ट स्ट्रोक और टेक्स्ट-छाया का समर्थन करता है। मैं स्ट्रोक को फ़ायरफ़ॉक्स में प्रदर्शित करने के लिए प्राप्त कर सकता हूं लेकिन वह टेक्स्ट-छाया का उपयोग कर रहा है और ऑफ़सेट के साथ खेल रहा है। तो क्या किसी को इस मुद्दे के आसपास एक रास्ता पता है।

Answer 1

text-stroke संपत्ति मानक सीएसएस स्पेक का हिस्सा नहीं है, इसलिए इससे बचने के लिए सबसे अच्छा है - क्रोम किसी भी समय इसे खींचने के अपने अधिकारों के भीतर अच्छा होगा।

आप सही है कि आप एकाधिक अल्पविराम से अलग 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; 
}​ 

बनें सावधान हालांकि, क्योंकि text-shadow IE9 और नीचे दिए गए में समर्थित नहीं है। मैं केवल गैर-आवश्यक स्टाइल के लिए इसका उपयोग करने की अनुशंसा करता हूं: सुनिश्चित करें कि पाठ अभी भी पठनीय है जब छाया/अशुद्ध रूपरेखा नहीं है।

Answer 2

फ़ायरफ़ॉक्स 48 अब पाठ स्ट्रोक ( साथ -webkit उपसर्ग), और साथ ही कुछ अन्य वेबकिट-विशिष्ट गुण (जैसे -webkit-text-fill-color) का समर्थन करता है। बस सावधान रहें कि विनिर्देश वास्तव में वहां नहीं है, और यह शायद भविष्य में बदल जाएगा।

.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>

मोज़िला वेबसाइट देखें::

यहाँ एक उदाहरण है कि अब फ़ायरफ़ॉक्स में काम करता है

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