android - ♥ 和 ♦ 在 HTML 中在 Android 上显示为黑色，即使颜色在 CSS 中设置为红色

Question

我正在使用 Meteor 平台用 HTML、JS 和 CSS 开发纸牌游戏。我使用 ♥ 作为红心套装，使用 ♦ 作为钻石套装。在 CSS 中使用 color: #FF0000; 将颜色设置为红色。字体系列设置为 font-family: 'Times', serif;。在桌面 PC、Mac 或 iPhone 上，这些图标显示为红色，但在使用 Chrome 的 Android 上，它们显示为黑色。但是，排名仍然显示为红色，这让我相信这是图标本身特有的。

在显示花色字符串之前，我通过空格键中的 SafeString 函数运行代码。

suitString: function(suit) {
    var suits = {'H': '♥', 'S':'♠', 'D':'♦', 'C':'♣'}

    return Spacebars.SafeString(suits[suit]);
  }

我想这与用于在 Android 上呈现图标的字体有关，但我一直无法弄清楚为什么会发生这种情况。或者它可能是特定于 SafeString 函数的内容。

谁能启发我，有没有办法在不使用西装图像的情况下确保所有设备上的颜色？

谢谢!

Answer 1

我认为这是一个 Android 5.0.x 字体渲染错误。它发生在网页和应用程序中。到目前为止我只在 Android 5.0.1 上看到过

我无法在 android 5.1.0 和 4.2.x 上重现它

我真的快被气死了。起初我虽然 html 表不接受颜色。

这是我的测试页面:http://ibob.github.io/tests/html/

如果你在 Android 5.0.1 设备上打开它，纯红色套装不会被着色。

空衣服看起来很糟糕，所以我想使用图像是唯一明智的解决方案。

编辑:

实际上，经过更多挖掘后，这似乎是 TouchWiz 问题(即仅限三星)。

在 5.0.1 之后的 TouchWiz 更新中，三星将纯色的字体渲染更改为类似表情符号的字体 - 不受着色影响。显然，它无法在非三星设备上重现，但它可以在 Android 版本大于 5.0.0 的所有设备上重现。

请注意，HTC 也做了类似的事情，但保留了纯色套装的颜色。但是，对于现代 HTC 设备，您不能用黑色以外的颜色绘制黑桃或梅花，也不能用红色以外的颜色绘制红心和方 block 。

其他带有自定义 android 模组的设备品牌可能有类似的问题。