css - 李 :before content: "✔ "; different color on some mobile devices

Question

我写 css 是为了让 li 标签更好。

在笔记本电脑和我的手机(lenovo vibe 1)和华硕 zenfone 5 上一切正常

但是当我在 Iphone 5 和 Galaxy Note3 上测试时，我的颜色 (rgb(240, 230, 140)) 显示为红色和黑色。

我不知道我的 CSS 有什么问题。我应该使用图像而不是 css 还是有 css 的解决方案？ 谢谢。

这是我的 CSS:

ul.anamenu li::before {
content: "✔ ";
color: rgb(240, 230, 140);
font-size: 4vmin;
text-indent: -2em;}

Answer 1

尝试在 ul.namenu li::before 上添加 font-family: 'Zapf Dingbats'。它在 iPhone 上运行良好。

编辑:17 年 6 月 26 日

存在这个问题是因为这个 Angular 色现在是 Apple(和其他构造函数)绘制的表情符号。在 emojipedia网站上，您可以看到此表情符号的一些变体。

因此，您渲染的字符是设备上的位图图像，而不是可以更改颜色的矢量字形。实现表情符号的构造器或平台可以根据需要自由设计自己的表情符号(如果需要，可以使用黑色、红色、粉色或其他颜色)。这就是为什么我们可能会误解一个表情符号的含义 depending on the platform where we see it .

There are currently 1,282 emoji in the Unicode standard, set by the Unicode Consortium, which provides a name, such as U+1F600 for 'grinning face,' but critically doesn't dictate what the emoji should look like.

要更改此字符的颜色，您必须处理文本。所以，你可以使用 variation selector 15直接在复选标记后获取常规文本版本:✔︎(HTML 格式)。不同语言的一些例子 here .

顺便说一句，关于 Heavy Check Mark，您可以使用变体选择器 content: "\2714\fe0e"; 尝试此解决方案。如您所见，有 unicode symbole在 CSS 中:'\2714' 和紧随其后的 VARATION SELECTOR '\fe0e'。

.unicode:after{
  content: '\2714 \fe0e';
  color: red;
}

<div class="unicode">
</div>