使用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 Credit转到Tigran获取原始解决方案：

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

Answer 3

你可以做一些棘手的事情将字体和CSS。您可以为三星字体着色。在这里查看我的其他帖子：

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

如果有效，请告诉我。