按钮上的彩色爱心emoji变为白色是什么原因？如何恢复红色？

问题原因 #

• 爱心属于Unicode emoji字符，粘贴到地址栏时调用的是系统默认的彩色emoji渲染规则，所以显示为红色。而按钮内的爱心受网页CSS样式影响才出现变色：
  1. 按钮本身设置了白色的color属性，emoji被当作普通文本处理时会继承该颜色值
  2. 按钮的font-family字体栈中没有优先配置系统彩色emoji字体，导致浏览器用普通文本字体渲染emoji，没有触发彩色渲染逻辑
  3. 大概率是近期网站更新了按钮的CSS规则，调整了颜色或字体配置，才导致之前正常的红色爱心变成白色

解决方法 #

1. 给爱心字符单独包裹行内标签，强制指定颜色，同时开启emoji彩色渲染：

/* 给包裹爱心的标签添加该类 */
.heart-icon {
  color: #e53935;
  font-variant-emoji: emoji;
}

2. 调整按钮的全局字体栈，加入系统彩色emoji字体，保证所有按钮内的emoji都能正常渲染彩色：

button {
  font-family: -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

3. 兼容性要求高的场景可以直接用红色爱心SVG图标替代文本emoji，渲染效果完全可控，不会受全局样式影响

内容的提问来源于stack exchange，提问作者Rogério Dec