当表情符号的字体粗细设置为“粗体”时，表情符号呈现为无颜色

Question

在正常情况下font-weight，带有表情符号的文本显示没有任何问题：

但设置为 后font-weight，bold表情符号将失去颜色：

Windows（10 和 11）上的 Chrome 中存在该问题，但 Windows 上的 Firefox 或 iOS / macOS 上的 Safari 中不存在该问题。

该问题似乎是由最近的 Chrome / Windows 更新（可能是 2021 年 11 月）引入的。

Answer 1

当我使用页面构建器“Elementor”在 WordPress 上创建网站时，我遇到了同样的问题。

当我尝试上传 SVG 文件时，同一页面上其他 SVG 文件中的所有视图都会失去质量。发生这种情况是因为所有 SVG 文件在页面构建器“Elementor”构建的文档中使用了相同的类名。

为了解决这个问题，我必须在关闭所有 SVG 文件时更改 ID，因为我在关闭它们时嵌入了内联样式。

我从“Elementor”插件的支持中得到的答案是：

“我尝试导入您提供的一些 SVG 文件，看起来发生这种情况是因为您的 SVG 文件中有内联样式，并且它们使用相同的类名“cls-1”。使用了该类名大多数 SVG 文件都会出现这种情况，当它们放置在同一页面上时会导致冲突。如果您使用 Illustrator 设计这些图标，请尝试分配唯一的 ID。您也可以手动编辑这些 SVG 文件并将类名更改为独一无二的。”

因此，请尝试将类名更改为唯一 ID，并清除浏览器上的缓存。