android - CSS 样式颜色对星号 (★) 在 Samsung with Android 4.4 KitKat 上无效

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)或 Samsung with Jelly Bean。

我尝试了像 -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";
}