如何在 Google Noto 表情符号黑白、彩色、图标之间进行选择？答案

【问题标题】：How to choose between Google Noto emoji black and white, versus color, icon?如何在 Google Noto 表情符号黑白、彩色、图标之间进行选择？
【发布时间】：2022-08-07 07:08:50
【问题描述】：

为什么下面代码中的表情符号有时显示为彩色，有时显示为黑白？以及如何使它保持一致 - 所以我可以在任何我想要的之间进行选择？

document.getElementById(\'m\').innerHTML = \'\\u{1F600}\';

emo { font-family: \'Noto Emoji\', sans-serif; }

<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">
<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin=\"true\">
<link href=\"https://fonts.googleapis.com/css2?family=Noto+Emoji&display=swap\" rel=\"stylesheet\">


<br />
<br />
<span class=\"emo\">&#x1F600</span>
<br />
<br />
<span id=\'m\' class=\"emo\"></span>
<br />
<br />
<select name=\"\" id=\"\">
            <option ><span class=\"emo\">&#x1F600</span></option>
</select>

标签： javascript html unicode emoji google-fonts

【解决方案1】：

您可以在代码点之后使用variation selectors 来控制字形是否应显示表情符号样式（如?️）或单色样式（?︎）。在实践中，如果未指定变体选择，则如何呈现字形因文本渲染器而异。

您可以使用 U+FE0E (VARIATION SELECTOR-15) 强制文本样式，并使用 U+FE0F (VARIATION SELECTOR-16) 强制表情符号样式：

Emoji style: ?&#xFE0F; <br>
Text style: ?&#xFE0E;

【讨论】：