CSS colore stile inefficace sul carattere stella (★) su Samsung con Android 4.4 KitKat

Question

Sul mio sito web mobile dedicato, io uso il carattere html stella ★ ★ e applicare i CSS su di esso, in particolare color.

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

.orange { 
    color: orange: 
} 

.grey { 
    color: grey; 
} 

Tutto funziona bene sulla maggior parte dei browser e del sistema operativo, in questo modo:

Ma su dispositivi Samsung con Android 4.4 KitKat (Galaxy S4, S5 ...), le stelle sono in stile nativo da touchwiz (suppongo) e la proprietà del colore non ha più alcun effetto sul browser di riserva e su Chrome, ma non su Firefox! E funziona bene su altri kitkat (LG G2, Nexus 7) o Samsung con Jelly Bean.

ho cercato stile specifico WebKit come -webkit-text-fill-color, senza alcun effetto.

Ho cercato tutti gli stili del webkit, ma non sembra che nulla corrisponda eccetto -webkit-text-fill-color.

Conosco altri modi per creare stelle come immagini, caratteri personalizzati o persino forme CSS, ma più semplice sarebbe meglio.

Quindi, l'hai mai visto e hai trovato lo stile magico che funziona?

Grazie.

Answer 1

Ho trovato qual era il problema. E 'all'interno dei font del sistema, in questo file esattamente:

/system/fonts/NotoColorEmoji.ttf 

Cambiando questo tipo di carattere (Samsung emoji) con un altro con emoji Android native, le stelle appaiono normalmente. Ho trovato il metodo qui: XDA - [MOD] Emoji iOS/Google on Samsung S4 Kit Kat.

Quindi non è possibile modificare direttamente le stelle Samsung.

Dal momento che ho più colori e taglie stelline, lavoro in reattivo design e necessità di gestire retina e altri display HD, l'immagine era troppo onerosa da implementare.

Ho provato le forme CSS, ma mentre gioco con dimensioni diverse nel responsive design (cambiando la dimensione del carattere di root in em modifica l'intera pagina), qualcosa di preciso in una dimensione, non era in un'altra.

Quindi ho usato font-face.
Su Icomoon, ho scelto la stella e creato un carattere personalizzato. Ho messo lo stile giusto e basta! Posso applicare CSS come voglio.

Il codice simile a questo:

HTML:

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

CSS:

@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"; 
}