防止 Segoe UI Emoji 字体在 Google Chrome 中的“font-weight: bold”下填充答案

【问题标题】：Prevent Segoe UI Emoji font to be bucket-filled under `font-weight: bold` in Google Chrome防止 Segoe UI Emoji 字体在 Google Chrome 中的“font-weight: bold”下填充
【发布时间】：2022-01-31 17:31:17
【问题描述】：

我相信这应该是 Windows、Chrome 和 CSS 中的一个长期存在的问题，但是我找不到能准确描述我的问题的正确 SO 问题：包含表情符号的文本将被“填充”如果 font-weight 属性设置为 700 或更高，则具有相同的 color 值。

（示例取自https://reinhart1010.id/blog/2022/01/31/password-oss-bocor-di-email/）

有趣的是，这种行为在 Firefox 下无法重现：

上面的截图确认文本是通过 Segoe UI Emoji 呈现的，不是捆绑的 TwemojiMozilla.ttf 字体系列。这个确切的问题可以通过以下方式重现：

body {
  font-family: ui-sans-serif, system-ui, sans-serif, "Segoe UI Emoji";
  color: red;
}

<html>
<body>
<p>✨ Normal font-weight</p>
<b>✨ Bold font-weight</b>
</body>
</html>

由于这种奇怪的行为预计会在其他浏览器（Edge、Opera、Vivaldi、Brave 等）上发生，我该如何避免这个问题？

【问题讨论】：

标签： css google-chrome

【解决方案1】：

这应该通过强制 Chrome 通过@font-face 加载“常规”（400）重量版本的 Segoe UI Emoji 来解决：

@font-face {
  font-family: 'Segoe UI Emoji';
  font-weight: 700;
  src: local('Segoe UI Emoji');
}

body {
  font-family: ui-sans-serif, system-ui, sans-serif, "Segoe UI Emoji";
  color: red;
}

.fw-900 {
  font-weight: 900;
}

<html>
<body>
<p>✨ Normal font-weight</p>
<b>✨ Bold font-weight</b>
<p class="fw-900">✨ Also works for "black" (900) font-weight!</p>
</body>
</html>

【讨论】：