CSS-Style-Farbe uneffektiv auf Sternzeichen (★) auf Samsung mit Android 4.4 KitKat

Question

Auf meiner dedizierten mobile Website verwende ich den HTML-Sterne-Charakter ★ ★ und ich anwenden CSS auf sich, vor allem color.

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

.orange { 
    color: orange: 
} 

.grey { 
    color: grey; 
} 

Alles funktioniert gut auf den meisten Browsern und Betriebssystem, wie folgt aus:

Aber auf Samsung-Geräten mit Android 4.4 kitkat (Galaxy S4, S5 ...), die Sterne werden nativ von touchwiz designed (ich nehme an) und die Farbeigenschaft hat keine Auswirkungen mehr auf den Browser und Chrome, aber nicht auf Firefox! Und es funktioniert auch auf anderen kitkat (LG G2, Nexus 7) oder Samsung mit Jelly Bean.

versuchte ich webkit spezifischen Stil wie -webkit-text-fill-color, ohne Wirkung.

Ich sah für alle webkit Stil, aber nichts scheint außer -webkit-text-fill-color zu entsprechen.

Ich kenne andere Möglichkeiten, um Sterne wie Bilder, benutzerdefinierte Schrift-Gesicht oder sogar CSS-Formen zu machen, aber einfacher wäre besser.

Also, hast du das jemals gesehen und den magischen Stil gefunden, der funktioniert?

Danke.

Answer 1

Ich fand, was das Problem war. Es ist in den Schriftarten des Systems, in dieser Datei genau:

/system/fonts/NotoColorEmoji.ttf 

Durch diese Schriftart (Samsung Emoji) mit einem anderen mit nativer Android Emojis zu ändern, die Sterne normal erscheinen. Ich habe die Methode hier gefunden: XDA - [MOD] Emoji iOS/Google on Samsung S4 Kit Kat.

So ist es nicht möglich, Samsung Sterne direkt zu optimieren.

Da ich mehrere Farben und Größen Sterne habe, arbeiten in Responsive Design und müssen Retina und andere HD-Displays verwalten, Bild waren zu beschwerlich zu implementieren.

Ich habe versucht, CSS Formen, aber wie ich mit verschiedenen Größen in Responsive Design (Ändern root font-size in em die ganze Seite modifiziert) spielen, etwas genau in einer Größe, war in einer andere nicht.

So habe ich font-face.
Auf Icomoon, wählte ich den Stern und machte eine benutzerdefinierte Schriftart. Ich habe den richtigen Stil und das war's! Ich kann CSS anwenden wie ich will.

Der Code sieht wie folgt aus:

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