unicode字符颜色问题

Question

无法更改以下字符的颜色：

<div style="font-size: 25px; color:red;">&#128269;</div>
<div style="font-size: 25px; color:red;">&#128227;</div>

而其他一些unicode字符接受颜色属性：

<div style="font-size: 25px; color:red;">&#9881;</div>

有没有办法改变以前字符的颜色？

https://jsfiddle.net/cs5053ka/

Answer 1

在许多系统上，表情符号字符与普通字符的绘制方式不同。虽然通过填充矢量轮廓来绘制像%这样的符号，但通常使用不尊重文本颜色的全色位图来绘制表情符号。

要更改表情符号字符的颜色，您有以下几种选择：

• 在图像编辑器中手动重新着色表情符号，并使用<img>标记或CSS背景图像进行显示。
• 使用包含类似图标的Font Awesome等网络图标字体。图标字体使用矢量轮廓绘制，就像常规符号一样，因此color属性适用于它们。
• 使用text-shadow hack以纯色填充表情符号。

您还可以使用variation selector将某些表情符号转换为可以重新着色的常规字符，但这不适用于或。