Chrome渲染unicode“Heavy Plus / Minus / Division Sign”

Question

我尝试通过U + 2797，重加/减/分号来渲染unicode字符U + 2795时，在某些版本的Chrome中遇到奇怪的渲染问题。在某些版本的Chrome上，该符号将呈现为带有某种黑色伪轮廓的丑陋灰色，不会响应CSS颜色命令。这是一张图片：

有关我尝试过的每个其他浏览器的外观示例，请参阅FileFormat.info - Unicode Character HEAVY PLUS SIGN

对于某些版本，我的意思是，我似乎无法将其缩小到特定版本的Chrome。运行Win10的两台不同计算机上的相同版本的Chrome将呈现不同的格式，我无法找到差异所在。

这是Chrome中的错误吗？我似乎无法找到其他人遇到此问题的地方。我试图将其包含在网站上，但如果某些版本的Chrome让它变得丑陋，我需要找到另一种解决方案。

- 编辑 -

XY问题

我的目的是在可折叠的手风琴盒中使用+/-作为“展开/折叠”标记，其背景可以是浅色或深色。我希望能够将它们着色以匹配文本的其余部分，而不需要求助于图像，但基于下面的评论我开始认为将.svg放在一起可能更容易，在CSS中重新着色它，并完成它。

Answer 1

问题是浏览器正在用表情符号替换字形，表情符号将以不同的方式呈现给每个浏览器。表情符号无法使用CSS进行着色 - 您可以做的最好是剪影它们并为轮廓着色，如Color for Unicode Emoji中所述。不幸的是，这仍然意味着字形在不同浏览器上的显示方式不同，因为表情符号不会使用您指定的字体进行渲染。

目前没有办法强制浏览器渲染字形而不是表情符号。附加\ FE0E（如How to prevent Unicode characters from rendering as emoji in HTML from JavaScript?中所述）有时会起作用，但这不一致，不保证，因此不建议使用。

您可以提供包含所需字形的网络字体，但这也无法保证可以正常工作，因为某些浏览器（尤其是在移动设备上）仍然会用表情符号替换它们。

如果您需要一致的渲染，最好的方法似乎是使用图像而不是试图强制浏览器不使用表情符号。