Windows端Chrome设置font-weight:bold时Emoji无颜色渲染问题

问题成因 #

该问题是Windows平台Chrome浏览器的字体 fallback 逻辑变动导致的：

• Windows系统自带的彩色Emoji字体为Segoe UI Emoji，本身仅提供normal（400）字重的字库文件，没有对应的粗体（700）字重资源
• 2021年Chrome更新调整了Windows平台的字重匹配优先级：当目标元素设置font-weight: bold时，Chrome找不到对应字重的彩色Emoji字体，就会 fallback 到包含粗体字重的普通无衬线字体（如Segoe UI），这类字体中的Emoji仅保留黑白轮廓，因此会丢失原有彩色效果
• Firefox、Safari等浏览器的字体 fallback 逻辑会优先匹配Emoji字符的字体，找不到对应字重时会自动缩放现有彩色Emoji字体模拟粗体，不会触发字体切换，因此不会出现该问题

可落地解决方案 #

方案1：全局指定Emoji字体优先级 + 禁止字体合成（推荐，改动最小） #

在全局CSS中添加如下规则，强制Emoji字符优先匹配系统彩色Emoji字体，同时禁止浏览器自动合成粗体：

* {
  font-family: system-ui, "Segoe UI Emoji", sans-serif;
  /* 禁止浏览器自动合成粗体/斜体，避免触发字体切换 */
  font-synthesis: none;
}

方案2：单独给Emoji字符设置样式 #

如果仅部分文本包含Emoji，可将Emoji单独用标签包裹，强制设置为常规字重：

<p style="font-weight: bold">
  粗体文本内容
  <span style="font-weight: normal">😊</span>
  其余粗体文本
</p>

方案3：通过unicode-range单独指定Emoji字体规则 #

无需修改DOM结构，仅针对Emoji字符范围指定专用字体：

/* 定义专门用于Emoji的字体规则 */
@font-face {
  font-family: "Fixed Color Emoji";
  src: local("Segoe UI Emoji");
  /* 覆盖主流Emoji字符编码范围 */
  unicode-range: U+1F000-U+1FFFF, U+2600-U+26FF, U+2700-U+27BF, U+1F600-U+1F64F;
}
/* 全局引入自定义Emoji字体 */
body {
  font-family: "Fixed Color Emoji", system-ui, sans-serif;
}

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