सीएसएस सैमसंग पर स्टार चरित्र (★) के साथ एंड्रॉयड 4.4 किटकैट

Question

मेरी समर्पित मोबाइल वेबसाइट पर पर शैली रंग uneffective, मैं एचटीएमएल स्टार चरित्र ★ ★ का उपयोग करें और मैं इस पर सीएसएस लागू होते हैं, विशेष रूप से color।

<span class="orange">&#9733; &#9733; &#9733;</span> 
<span class="grey">&#9733; &#9733;</span> 

.orange { 
    color: orange: 
} 

.grey { 
    color: grey; 
} 

सब कुछ अधिकांश ब्राउज़र और ओएस पर अच्छी तरह से काम करता है, इस तरह:

लेकिन साथ एंड्रॉयड 4.4 किटकैट सैमसंग उपकरणों (गैलेक्सी एस 4, S5 ...), सितारों पर टचविज़ (मुझे लगता है) द्वारा मूल रूप से स्टाइल किया गया है और रंगीन संपत्ति का अब स्टॉक ब्राउज़र और क्रोम पर कोई प्रभाव नहीं पड़ता है, लेकिन फ़ायरफ़ॉक्स नहीं! और यह अन्य किटकैट (एलजी जी 2, नेक्सस 7) या जेली बीन के साथ सैमसंग पर अच्छा काम करता है।

मैं -webkit-text-fill-color तरह वेबकिट विशिष्ट शैली की कोशिश की, कोई प्रभाव नहीं साथ।

मैंने सभी वेबकिट शैली की तलाश की, लेकिन -webkit-text-fill-color को छोड़कर कुछ भी मेल नहीं खाता।

मैं छवियों, कस्टम फ़ॉन्ट-फेस या यहां तक ​​कि सीएसएस आकार जैसे सितारों को बनाने का अन्य तरीका जानता हूं, लेकिन सरल बेहतर होगा।

तो, क्या आपने कभी देखा है और जादू शैली जो काम करती है?

धन्यवाद।

Answer 1

मुझे पता चला कि समस्या क्या थी। यह प्रणाली के फोंट के अंदर है, इस फाइल को बिल्कुल में:

/system/fonts/NotoColorEmoji.ttf 

देशी Android इमोजी के साथ एक और के साथ इस फ़ॉन्ट (सैमसंग इमोजी) बदलने से, सितारों सामान्य रूप से दिखाई देते हैं। मुझे यहां विधि मिली: XDA - [MOD] Emoji iOS/Google on Samsung S4 Kit Kat।

तो सैमसंग सितारों को सीधे ट्विक करना संभव नहीं है।

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

मैंने सीएसएस आकार की कोशिश की, लेकिन जैसा कि मैं उत्तरदायी डिजाइन में विभिन्न आकारों के साथ खेलता हूं (एम में रूट फ़ॉन्ट आकार बदलना पूरे पृष्ठ को संशोधित करता है), एक आकार में सटीक कुछ, दूसरे में नहीं था।

तो मैंने फ़ॉन्ट-फेस का उपयोग किया।
Icomoon पर, मैंने स्टार चुना और एक कस्टम फ़ॉन्ट बनाया। मैंने सही शैली डाली और यही वह है! मैं सीएसएस जैसे मैं चाहता हूं लागू कर सकते हैं।

कोड इस तरह दिखता है:

HTML:

<span class="icon-star"></span> 

सीएसएस:

@font-face { 
    font-family: 'icomoon'; 
    src:url('fonts/icomoon.eot?4n7iw5'); 
    src:url('fonts/icomoon.eot?#iefix4n7iw5') format('embedded-opentype'), 
     url('fonts/icomoon.woff?4n7iw5') format('woff'), 
     url('fonts/icomoon.ttf?4n7iw5') format('truetype'), 
     url('fonts/icomoon.svg?4n7iw5#icomoon') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

[class^="icon-"], [class*=" icon-"] { 
    font-family: 'icomoon'; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 

    /* Better Font Rendering =========== */ 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

.icon-star:before { 
    content: "\e600"; 
}