HTML 中的 ♥ 和 ♦ 在 Android 中显示为黑色,即使颜色在 CSS 中设置为红色
♥ and ♦ in the HTML show as black on Android even though the color is set as red in the CSS
我正在使用 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 函数的内容。
谁能赐教一下,有没有办法在不使用西装图片的情况下保证所有设备上的颜色?
谢谢!
我在使用♥(黑心套装,如http://www.w3schools.com/charsets/ref_utf_symbols.asp所述)时遇到同样的问题
在 PC 中,您可以使用 css 颜色属性更改颜色。但是,在 android 中,无论您指定什么颜色,它都显示为黑色。
我怀疑这是 android 浏览器呈现黑色图标的问题。
我改用了♡(白色空心),它不仅适用于 PC,而且适用于 android 浏览器,它具有 css 颜色属性。
或者,具有所需颜色的图像或代码中内置的 svg 可以使用任何 css 颜色。
我认为这是一个 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 模组的设备品牌可能有类似的问题。
我正在使用 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 函数的内容。
谁能赐教一下,有没有办法在不使用西装图片的情况下保证所有设备上的颜色?
谢谢!
我在使用♥(黑心套装,如http://www.w3schools.com/charsets/ref_utf_symbols.asp所述)时遇到同样的问题
在 PC 中,您可以使用 css 颜色属性更改颜色。但是,在 android 中,无论您指定什么颜色,它都显示为黑色。
我怀疑这是 android 浏览器呈现黑色图标的问题。
我改用了♡(白色空心),它不仅适用于 PC,而且适用于 android 浏览器,它具有 css 颜色属性。 或者,具有所需颜色的图像或代码中内置的 svg 可以使用任何 css 颜色。
我认为这是一个 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 模组的设备品牌可能有类似的问题。