使用Android 4.4 KitKat的三星上的星形字符（★）的CSS样式颜色无效

Question

在我的专用移动网站上，我使用html明星角色★★并在其上应用CSS，尤其是color。

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

.orange {
    color: orange:
}

.grey {
    color: grey;
}

一切都适用于大多数浏览器和操作系统，如下所示：

但是在使用 Android 4.4 kitkat（Galaxy S4，S5 ......）的三星设备上，这些星星本身都是由touchwiz设计的（我想）并且颜色属性对库存浏览器不再有影响和Chrome，但不是Firefox！ 它适用于其他kitkat （LG G2，Nexus 7）或带果冻豆的三星。

我尝试了类似 -webkit-text-fill-color的webkit特定样式，但没有效果。

我查找了所有webkit样式，但除了-webkit-text-fill-color之外似乎没有任何对应。

我知道其他方式制作星星，如图像，自定义字体或甚至CSS形状，但更简单会更好。

那么，你有没有见过它，并找到了有效的神奇风格？

感谢。

Answer 1

我发现了问题所在。它位于系统的字体内，完全在这个文件中：

/system/fonts/NotoColorEmoji.ttf

通过使用原生Android表情符号更改此字体（三星表情符号），星星正常显示。 我在这里找到了这个方法：XDA - [MOD] Emoji iOS / Google on Samsung S4 Kit Kat。

所以不可能直接调整三星的明星。

由于我有多种颜色和尺寸的星星，在响应式设计中工作，需要管理视网膜和其他高清显示器，图像太繁重而无法实现。

我尝试了CSS形状，但是当我在响应式设计中使用不同大小的游戏时（在em中更改根字体大小会修改整个页面），一个尺寸的精确内容不在另一个中。

所以我使用了font-face 在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";
}

Answer 2

我知道这是3年前提出的，但是最近我遇到了同样的问题。一种方法是使用css shadow hack归功于Tigran以获得原始解决方案：

.orange {
  color: transparent;  
  text-shadow: 0 0 0 orange;
}

Answer 3

您可以做一些棘手的事情，例如字体和CSS。您可能可以为Samsung字体上色。在这里查看我的其他帖子：

https://stackoverflow.com/a/50478585/5078765

让我知道它是否有效。