提问

我写CSS来让li标签看起来更好。

在桌面端和我的手机（联想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;}

回答1

试试在ul.anamenu li::before上添加font-family: 'Zapf Dingbats'。这可以用在iPhone上。

编辑：2017年6月26日

之所以会出现这个问题，是因为这个字符现在是苹果（和其他厂商）绘制的表情符号。在emojipedia这个网站里，你可以看到一些这个表情的变体。

因此，你渲染的字符是你设备上的位图图像，并不是可以改变颜色的矢量字形。构造表情符号的厂商或平台可以自由的（用黑色、红色、粉色或其他颜色，如果他们愿意）设计他们自己想要的表情符号。这就是为什么我们可能会误解一个表情符号的含义，取决于我们看到它的平台。

目前，Unicode 标准中有1282个表情符号，该标准是由 Unicode 联盟制定的。Unicode 联盟还为每个表情提供了一个名称，例如 U+1F600 表示“笑脸”，但关键的是，它并没有规定表情符号应该是什么样子。

想要改变这个字符的颜色，你必须处理文本。因此，您可以在复选标记后直接使用变体选择符 15 来获取常规文本版本：✔︎（HTML 格式）。此处提供了不同语言的一些示例。

顺带一提，关于 Heavy Check Mark，你可以试试这个解决方法用变体选择符content: "\2714 \fe0e"; 。如你所见，CSS 中有 unicode 符号：“\2714”，后面紧接着变体选择符“\fe0e”。

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

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

回答2

正如Alex - DJDB所说，你不能改变这个html符号的颜色。但是你可以用另一个符号。用✓ check mark (U+2713)这个符号，你可以修改这个符号的颜色。

我在这找到的： https://graphemica.com/%E2%9C%93

html {
  color: red;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

<p>✓ check mark (U+2713)</p>
<p>✔ heavy check mark (U+2714)</p>

内容来源于StackOverflow, 遵循 CCBY-SA 4.0 许可协议进行翻译与使用。原文链接：li :before content: "✔ "; different color on some mobile devices。注：切换语言可直接看到原文。