text-strokeएक प्रायोगिक संपत्ति है जो एडोब इलस्ट्रेटर या अन्य वेक्टर ड्राइंग अनुप्रयोगों में पाए जाने वाले टेक्स्ट सजावट विकल्प प्रदान करता है। यह वर्तमान में किसी भी W3C या WHATWG विनिर्देश में शामिल नहीं है। जून 2013 तक, इसे केवल एक -webkitविक्रेता उपसर्ग के पीछे लागू किया गया है , हालांकि फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर के भविष्य के संस्करण संपत्ति का समर्थन कर सकते हैं (संभवतः अपने स्वयं के उपसर्गों के तहत)।
mark ( -webkit-text-stroke: 2px red; )text-strokeसंपत्ति वास्तव में दो अन्य संपत्तियों के लिए आशुलिपि है:
text-stroke-width, जो इकाई मूल्य (1px, 0.125em, 4in, वगैरह) लेता है और स्ट्रोक प्रभाव की मोटाई का वर्णन करता है।text-stroke-color, जो एक रंग मूल्य (हेक्स, आरजीबी / आरजीबी, एचएसएल / एचएसएल, वगैरह) लेता है।
text-strokeएक साथी की संपत्ति भी है text-fill-color, जो संपत्ति को ओवरराइड करेगा, जो colorब्राउज़रों में एक अलग पाठ रंग के लिए एक सुंदर वापसी की अनुमति देता है जो समर्थन नहीं करते हैं text-stroke।
ब्याज के अंक
- द्वारा खींचा गया स्ट्रोक
text-strokeपाठ आकार के केंद्र से जुड़ा हुआ है (जैसा कि Adobe Illustrator में डिफ़ॉल्ट है), और वर्तमान में आकार के अंदर या बाहर संरेखण सेट करने का कोई विकल्प नहीं है। दुर्भाग्य से यह बहुत कम प्रयोग करने योग्य बनाता है, क्योंकि कोई फर्क नहीं पड़ता कि अब स्ट्रोक मूल प्रकार के डिजाइनरों के इरादे को नष्ट करने वाले पत्र के आकार में हस्तक्षेप करता है। एक सेटिंग आदर्श होगी, लेकिन अगर हमें किसी एक को चुनना है, तो बाहर का स्ट्रोक अधिक उपयोगी होगा। - वेबकिट में,
text-strokeसीएसएस बदलाव और एनिमेशन के साथ एनिमेशन योग्य है - लेकिन केवल स्ट्रोक रंग, स्ट्रोक की चौड़ाई नहीं। text-strokeप्रभाव का उपयोग करने के लिए एक अधिक ब्राउज़र-संगत (और यकीनन मजबूत) स्टैंड-इन का उपयोगtext-shadowकिया जाता है, जो इस CSS-ट्रिक्स लेख में उल्लिखित है।
ब्राउज़र का समर्थन
| क्रोम | सफारी | फ़ायर्फ़ॉक्स | ओपेरा | अर्थात | एंड्रॉयड | आईओएस |
|---|---|---|---|---|---|---|
| -वेबकिट- | -वेबकिट- | २१ | 15+ | १० | उलझा हुआ | -वेबकिट- |
ब्राउज़र समर्थन पर एक नोट: ऊपर दी गई तालिका समग्र ब्राउज़र समर्थन का सारांश है text-stroke- सच्चाई बहुत अधिक जटिल है (उदाहरण के लिए, एंड्रॉइड ने 2.1-2.3 संस्करणों में संपत्ति का समर्थन किया, फिर 4.0 में समर्थन बहाल करने से पहले 3.0 में समर्थन हटा दिया) । पूर्ण ब्राउज़र समर्थन तालिका के लिए, caniuse.com/text-stroke पर जाएं।