Цвет стиля CSS неэффективен по звездному персонажу (& # 9733;) на Samsung с Android 4.4 KitKat

На моем выделенном мобильном сайте я использую символ html star ★ И я применяю к нему CSS, особенно color .

 <span class="orange">★ ★ ★</span> <span class="grey">★ ★</span> .orange { color: orange: } .grey { color: grey; } 

Все работает хорошо в большинстве браузеров и os, например:

Введите описание изображения здесь

Но на устройствах Samsung с Android 4.4 kitkat (Galaxy S4, S5 …) звезды изначально стилизованы touchwiz (я полагаю), и свойство цвета больше не действует в браузере и Chrome, а не в Firefox! И он хорошо работает на другом kitkat (LG G2, Nexus 7) или Samsung с Jelly Bean .

Введите описание изображения здесь

Я пробовал стиль webkit, например -webkit-text-fill-color , без эффекта .

Я искал весь стиль webkit, но ничего похожего не соответствует, кроме -webkit-text-fill-color .

Я знаю другой способ сделать звезды похожими на изображения, пользовательские шрифты или даже фигуры CSS, но проще было бы лучше.

Итак, вы когда-нибудь видели это и нашли волшебный стиль, который работает?

Благодарю.

Solutions Collecting From Web of "Цвет стиля CSS неэффективен по звездному персонажу (& # 9733;) на Samsung с Android 4.4 KitKat"

Я понял, в чем проблема. Он находится внутри шрифтов системы, в этом файле:

 /system/fonts/NotoColorEmoji.ttf 

Изменив этот шрифт (Samsung emoji) на другой с помощью родного Android-эмулятора, звезды появляются нормально. Я нашел метод здесь: XDA – [MOD] Emoji iOS / Google на Samsung S4 Kit Kat .

Таким образом, невозможно напрямую настроить Samsung.

Поскольку у меня есть несколько цветов и размеров звезд, работайте в гибком дизайне и вам нужно управлять сетчаткой и другими дисплеями HD, изображение слишком обременительно для реализации.

Я пробовал CSS-формы, но поскольку я играю с разными размерами в отзывчивом дизайне (изменение размера корневого шрифта в em изменяет всю страницу), то точный в одном размере не был в другом.

Поэтому я использовал шрифт.
На Icomoon я выбрал звезду и сделал специальный шрифт. Я поставил правильный стиль, и все! Я могу применить CSS, как я хочу.

Код выглядит так:

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