HTML文件emoji无法显示彩色，原有彩色🏠表情未改代码变为黑白怎么解决

当前主流浏览器近期更新了emoji渲染逻辑：如果emoji所在的父元素设置了明确的color属性，emoji会默认继承文本颜色渲染为单色，和此前优先显示原生彩色emoji的默认逻辑不同，所以即使你没有修改代码也会出现样式变化。

• 方案1：单独包裹emoji重置颜色
  将emoji单独用<span>标签包裹，给span设置颜色重置属性，修改后的代码示例如下：

<a href="index.html" style="text-decoration: underline;color:rgb(20, 188, 255)"  onMouseOver="this.style.color='blue'"
onMouseOut="this.style.color='rgb(20, 188, 255)'">
<span style="color: initial;">🏠</span>Home
</a>

• 方案2：强制指定emoji渲染模式
  使用CSS标准属性font-variant-emoji强制元素渲染为彩色emoji，兼容性覆盖90%以上主流浏览器，修改示例如下：

<a href="index.html" style="text-decoration: underline;color:rgb(20, 188, 255)"  onMouseOver="this.style.color='blue'"
onMouseOut="this.style.color='rgb(20, 188, 255)'">
<span style="font-variant-emoji: emoji;">🏠</span>Home
</a>

如果站点内所有emoji都有类似问题，可以直接添加全局CSS规则：

* {
  font-variant-emoji: emoji;
}

• 方案3：兜底兼容旧版浏览器
  如果需要兼容非常旧的浏览器，可以把color: initial和font-variant-emoji: emoji两个属性同时加在包裹emoji的span上，两种逻辑同时生效，覆盖所有场景。

内容的提问来源于stack exchange，提问作者PixelPasta