Unicode Emoji的颜色

Question

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

例如，这里有一些Emoji和一些普通的(平面0) Unicode符号。所有的符号都应该是红色的，但只有符号是红色的。

​

​

关联HTML + CSS

<p>
  
</p>
<p>
  ♥★ℹ
</div>

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

Answer 1

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

​

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

<div></div>

​

Answer 2

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

文本风格的表情符号是单色的，应该以前景颜色显示，即CSS中的currentcolor，就像任何其他的字形一样。Unicode提供一个按风格划分的表情符号概述 (测试版)。您应该能够在︎中添加文本变体，并在标有“默认文本样式；有默认Emoji样式；有VSs”的列中选择任何内容。不过，这不包括示例表情符号和许多其他表情符号。

​

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骷髅和U+1F44C OK手符号，因为背景应该通过他们的“眼睛”显示，我使用数字字符引用只是为了使代码更加明显，并且对复制和粘贴错误更加健壮。

然而，有人建议，这两种变体选择器都可以应用于任何字符，这在大多数情况下都不会产生影响。请注意，一些供应商，特别是三星，已经发布(默认) 其他几个字符的表情符号 (goo.gl/a4yK6p或goo.gl/DqtHcc)。

Answer 3

我想自己来做这件事，所以我最近想出了一个解决方案，它使用新的CSS效果，同样适用于Firefox和Edge。

使用过滤器，你首先用紫色(1)来规范颜色，然后你把它浸透，得到一个纯红色。如果你想去除黑线，在使用对比度(0)应用其他过滤器之前，从表情符号中吸取对比。在那之后，你只需旋转颜色轮从红色到任何颜色，你想使用色调-旋转()。注意，由于我使用的是十进制值而不是%，所以100的值意味着10000%。

色调偏移被定义为以红色开头。我们很幸运，紫红色大部分是红色的，所以车轮在0度的时候就完美地开始了。您可以使用RGB到HSL转换器计算所需的偏移量。我在这里找到了一个用Javascript写的很好的：https://web.archive.org/web/20180808220922/http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c

您必须将色调值乘以360，才能从该函数中获得所需的结果。rgbToHsl(0,100,100)[0]*360就是一个例子。还会有180美元。由于没有红色，这将是预期的结果，你将旋转180度离红色。

正如Litherium an Crissov所指出的，也有文本表情符号。这些转换的效果更好，而且通常看起来更好。但是，在第一次对文本表情符号应用invert(.5)之前，不能应用我前面描述的方法，这是因为函数需要某种阴影来操作。因此，简单地将invert(.5)添加到每个公式的开头，允许它们在所有浏览器上的两个代码点上操作。

​

.a { /* Normalize colour to a primary red */
    filter: sepia(1) saturate(100);
}
.b { /* Less saturation so more features, shifted colour 90-degrees */
    filter: sepia(1) saturate(5)  hue-rotate(90deg);
}
.c { /* Remove black outlines if desired by removing contrast */
    filter: contrast(0) sepia(1) saturate(100) hue-rotate(180deg);
}
.d { /* Other shades possible by lowering brightness */
    filter: contrast(0) sepia(1) saturate(100) brightness(.05) hue-rotate(180deg);
}
.e { /* Weird possibilities with no colour normalization */
    filter: contrast(100) hue-rotate(180deg);
}
.ma { /* Invert to provide a gray shade to apply sepia*/
    filter: invert(.5) sepia(1) saturate(100);
}
div {
    font-size: 25px;
}
.emo > div::after {
    content: "⛄";
}
.mono > div::after {
    content: "\1F30D\FE0E\26C4\FE0E\1F60D\FE0E\1F431\FE0E";
}

<div class="emo">
    <div>-:</div>
    <div class="a">a:</div>
    <div class="b">b:</div>
    <div class="c">c:</div>
    <div class="d">d:</div>
    <div class="e">e:</div>
</div>
<span>Change the code point to text mode:</span>
<div class="mono">
    <div class="a">a:</div>
    <div class="ma">ma:</div>
</div>

​

更新:现在npm上有更新的软件包，可以计算颜色等等。你不需要在我以前链接过的网站上使用这个片段。下面是一个例子：https://stackoverflow.com/a/56082323/5078765