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

我在使用♥（黑心套装，如http://www.w3schools.com/charsets/ref_utf_symbols.asp所述）时遇到同样的问题

在 PC 中，您可以使用 css 颜色属性更改颜色。但是，在 android 中，无论您指定什么颜色，它都显示为黑色。

我怀疑这是 android 浏览器呈现黑色图标的问题。

我改用了♡（白色空心），它不仅适用于 PC，而且适用于 android 浏览器，它具有 css 颜色属性。或者，具有所需颜色的图像或代码中内置的 svg 可以使用任何 css 颜色。

Answer 2

我认为这是一个 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 设备，您不能用黑色以外的颜色绘制黑桃或梅花，也不能用红色以外的颜色绘制红心和方块。

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

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

&hearts; and &diams; in the HTML show as black on Android even though the color is set as red in the CSS

android

html

css

fonts

meteor