Unicode 表情符号的颜色

Question

在现代浏览器中可以包含 Emoji 字符，但如何使其成为单一颜色并选择该颜色呢？

例如，这里有一些表情符号和一些常规（平面 0）Unicode 符号。全部应该是红色的，但只有符号呈现为红色。

关联 的 HTML + CSS ：

 <p>
  🐘🐧🐼
</p>
<p>
  ♥★ℹ
</div>

p {
  font-size: 3em;
  color: red
}

原文由 mahemoff 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，你可以给它们上色！

 div {
  color: transparent;
  text-shadow: 0 0 0 red;
}

 <div>🚀🎭😻</div>

原文由 Tigran 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

并非每个表情符号都一样。有些是旧的文本符号，现在具有（可选或默认）彩色表示，其他的则明确（仅）作为表情符号。这意味着，一些 Unicode 代码点应该有两种可能的表示形式， text 和 emoji 。作者和用户应该能够表达他们对其中一个或另一个的偏好。目前这是通过其他不可见的 变体选择器 U+FE0E（ text ，VS-15）和 U+FE0F（ emoji ，VS-16）完成的，但是 更高级别的解决方案（例如对于 CSS） 已经被提议。

文本样式的表情符号是单色的，应该以前景色显示，即 currentcolor 在 CSS 中，就像任何其他字形一样。 Unicode Consortium 按风格提供表情符号的概述（ 测试版）。您应该能够在 HTML 中附加 ︎ 以选择标有“默认文本样式”的列中的任何文本变体； 有VS ”和“默认表情符号样式； 有 VS ”。不过，这不包括示例表情符号 🐘🐧🐼 和许多其他表情符号。

 p {
  color: red; font-size: 3em; margin: 0;
  text-transform: text;           /* proposed */
  font-variant-emoji: text;       /* proposed */
  font-variant-color: monochrome; /* proposed */
  font-color: monochrome;         /* proposed */
  font-palette: dark;             /* drafted for CSS Fonts Level 4 */
}
p.hack {
  color: rgba(100%, 0%, 0%, 0);
  text-shadow: 0 0 0 red;
}
p.font {
  font-family: Emojione, Noto, Twemoji, Symbola;
}
@font-face { /* http://emojione.com/developers/ */
  font-family: Emojione;
  src: local("EmojiOne BW"), local("EmojiOne"), local("Emoji One"),
       /*   https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-bw.otf – monochrome only, deprecated, removed
            https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-android.ttf – with hack
            https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-apple.ttf – with hack */
       url("https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-svg.woff2") format("woff2"),
       url("https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-svg.woff") format("woff"),
       url("https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-svg.otf") format("truetype");
}
@font-face { /* https://www.google.com/get/noto/#noto-emoji-zsye */
  font-family: Noto;
  src: local("Noto Emoji"), local("Noto Color Emoji"), local("Noto"),
       url("https://cdn.rawgit.com/googlei18n/noto-emoji/master/fonts/NotoEmoji-Regular.ttf");
}
@font-face { /* https://github.com/eosrei/twemoji-color-font/releases */
  font-family: Twemoji;
  src: local("Twemoji");
}
@font-face { /* http://users.teilar.gr/~g1951d/ */
  font-family: Symbola;
  src: local("Symbola");
}

 <p title="🐘🐧🐼♥★ℹ💀👌 without variation selectors">&#x1F418; &#x1F427; &#x1F43C; &#x2665; &#x2605; &#x2139; &#x1F480; &#x1F44C;</p>
<p title="🐘🐧🐼♥★ℹ💀👌 with text variation selector 15">&#x1F418;&#xFE0E; &#x1F427;&#xFE0E; &#x1F43C;&#xFE0E; &#x2665;&#xFE0E; &#x2605;&#xFE0E; &#x2139;&#xFE0E; &#x1F480;&#xFE0E; &#x1F44C;&#xFE0E;</p>
<p title="🐘🐧🐼♥★ℹ💀👌 with emoji variation selector 16">&#x1F418;&#xFE0F; &#x1F427;&#xFE0F; &#x1F43C;&#xFE0F; &#x2665;&#xFE0F; &#x2605;&#xFE0F; &#x2139;&#xFE0F; &#x1F480;&#xFE0F; &#x1F44C;&#xFE0F;</p>
<p title="🐘🐧🐼♥★ℹ💀👌 with `text-shadow` hack" class="hack">&#x1F418; &#x1F427; &#x1F43C; &#x2665; &#x2605; &#x2139; &#x1F480; &#x1F44C;</p>
<p title="🐘🐧🐼♥★ℹ💀👌 with custom font" class="font">&#x1F418; &#x1F427; &#x1F43C; &#x2665; &#x2605; &#x2139; &#x1F480; &#x1F44C;</p>

我添加了💀 U+1F480 Skull 和👌 U+1F44C OK Hand Sign，因为背景应该通过他们的“眼睛”显示，我使用数字字符引用只是为了让代码更明显，更健壮，防止复制和-粘贴错误。

然而，有人提议，两个变体选择器都可以应用于任何字符，这在大多数情况下都没有效果。请注意，一些供应商，尤其是三星，已经 为其他几个字符（ goo.gl/a4yK6p 或 goo.gl/DqtHcc ）提供（默认）表情符号字形。

原文由 Crissov 发布，翻译遵循 CC BY-SA 3.0 许可协议