Question

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

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

<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。作者和用户应该能够表达他们对一个或另一个的偏好。这是目前使用其他不可见的variation selectors U + FE0E（text，VS-15）和U + FE0F（emoji，VS-16），但higher-level solutions (e.g. for CSS)已经完成建议。

文本风格的表情符号是单色的，应该以前景色显示，即CSS中的currentcolor，就像任何其他字形一样。 Unicode Consortium提供overview of emojis by style（beta version）。您应该能够在HTML中附加︎以选择文本变体，其中包含标记为“默认文字样式”的列中的任何内容; 有VSs “和”默认表情符号样式; 有VS “。但是，这不包括示例表情符号和许多其他情况。

＆＃13;

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");
}

＆＃13;

<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>

＆＃13;

我添加了U + 1F480 Skull和U + 1F44C OK手势，因为背景应该通过他们的“眼睛”显示，我使用数字字符引用只是为了使代码更明显，更强大，防止复制和 - 错误。

然而，有人提出，两种变异选择器都可以应用于任何角色，这在大多数情况下都没有效果。请注意，某些供应商（尤其是三星）已经发货（默认）emoji glyphs for several other characters（goo.gl/a4yK6p或goo.gl/DqtHcc）。

Answer 3

您可以用纯色填充它们：

＆＃13;

p {
  font-size: 20px;
  color: transparent;
  text-shadow: 0 0 0 blue;
}

＆＃13;

<p></p>
<p></p>
<p></p>

＆＃13;

或者您可以概述它们：

＆＃13;

body {
  background: #fff;
}

p {
  margin: 0;
  color: transparent;
  text-shadow: 0 0 3px blue;
  font-size: 20px;
  position: relative;
}

p::before {
  content: attr(title);
  position: absolute;
  text-shadow: 0 0 0 #fff;
}

＆＃13;

<p title=""></p>
<p title=""></p>
<p title=""></p>

＆＃13;

Answer 4

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

使用过滤器，首先使用棕褐色（1）对颜色进行标准化，然后将其从中浸透以获得纯红色。如果你想摆脱黑色线条，在使用对比度（0）应用其他滤镜之前，先从表情符号中吸取对比度。之后，您只需使用hue-rotate（）将色轮从红色旋转到您想要的任何颜色。请注意，因为我使用十进制值而不是％'s，值100表示10000％。

Hue偏移定义为从红色开始。我们很幸运，棕褐色大多是红色的，所以轮子在0度时开始完美。您可以使用RGB到HSL转换器计算所需的偏移量。我发现了一个用Javascript编写的好文章：http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c

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

正如Litherium和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"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
</div>
<span>Change the code point to text mode:</span>
<div class="mono">
    <div class="a"></div>
    <div class="ma"></div>
</div>

Answer 5

某些（但不是全部）代码点可以以文本形式（非基于图片的字形）或表情符号形式（基于图片的字形）绘制。 Unicode描述了可以使用两个变体选择器之一来选择这两种形式：U + FE0E（VARIATION SELECTOR-15）或U + FE0F（VARIATION SELECTOR-16）。以非基于图片的形式绘制时，color CSS属性应该适用。

示例：

以这种方式绘制了U + 2603（SNOWMAN）：☃

以这种方式绘制代码点U + 2603 U + FE0E的序列：☃︎

代码点U + 2603 U + FE0F的顺序是这样绘制的：☃️

更多信息以及参与这些变体序列的代码点的完整列表，可在http://unicode.org/emoji/charts/emoji-variants.html找到

（请注意，当使用裸代码点时，不同的操作系统可能会选择不同的默认值。例如，尝试在macOS和iOS中查看此帖子 - 上面的裸代码点看起来不同！）

Answer 6

由于表情符号很新，所以它的样式本身尚未得到支持。

解决方法是使用表情符号字体，例如Twitter's Twemoji。然后它的样式可以与Font Awesome或原生Unicode的样式相同。

Answer 7

如果要将详细信息保留在表情符号中，可以使用filter: url()，其中url将使用svg filter

svg {
  display: none;
}

div {
  -webkit-filter: url(#red);
  filter: url(#red);
}

<svg>
  <filter id="red">
    <feColorMatrix type="matrix" values="
      1 0 0 0 0
      0 0 0 0 0
      0 0 0 0 0
      0 0 0 1 0" />
  </filter>
</svg>

<div></div>

尽管起初使用feColorMatrix似乎令人生畏，但实际上定义您自己的颜色很简单。以以下表示红色的示例为例：

如果您从上方获取粗体值，我们可以看到它们与RGBA色彩模式的关系：

1 - red   (r)
0 - green (g)
0 - blue  (b)
1 - alpha (a)

此处每种颜色与0到255之间的值除以255有关。因此，如果您具有绿色，则其RGBA为：

 R   G   B  A
(0, 255, 0, 1)

那么您的值将是：

0/255 ->   0 (r)
255/255 -> 1 (g)
0/255 ->   0 (b)
1    ->    1 (a) - don't divide

因此，在矩阵中使用这些值，我们得到：

您现在可以将其添加为其他过滤器（或删除旧的过滤器），并为其指定一个id，以便可以在CSS filter: url(#filterID)中引用它

请参阅以下实现的版本：

svg {
  display: none;
}

.red {
  -webkit-filter: url(#red);
  filter: url(#red);
}

.green {
  -webkit-filter: url(#green);
  filter: url(#green);
}

<svg>
  <filter id="red">
    <feColorMatrix type="matrix" values="
      1 0 0 0 0
      0 0 0 0 0
      0 0 0 0 0
      0 0 0 1 0" />
  </filter>
  
  <!--         \/ --- change id to be refrenced within css -->
  <filter id="green">
    <feColorMatrix type="matrix" values="
      0 0 0 0 0
      0 1 0 0 0
      0 0 0 0 0
      0 0 0 1 0" />
  </filter>
</svg>

<div class="red"></div>
<div class="green"></div>

请注意：目前，此解决方案对浏览器的支持非常有限。要查看此功能支持的浏览器的完整列表，请参阅here。

Answer 8

如果您需要在使用CSS后使用CSS，那么您可以按照此类原则进行操作

<span class="react-thumb-fly" title="Aimé">
   <button class="react-toggle-icon-thumb"></button>
</span>

然后为CSS写这个

.react-toggle-icon-thumb {
  width: 20pt;
  height: 20pt;
  font-size: 30pt;
  position: relative;
  color: gray;
  cursor: pointer;
  border: none;
  background: transparent;
  margin-left: 0px;
  margin-right: 8px;
  top: -0px;
}
.react-toggle-icon-thumb:before, .react-toggle-icon-thumb:after {
  position: absolute;
  top: 0;
  left: 0;
  transition: all .3s ease-out;
  content: "";
  font-family: fontawesome;
  color: transparent;  
 text-shadow: 0 0 0 #3498db;
}

.react-toggle-icon-thumb:hover:before {
  transform: scale(1.2);
  animation: thumbs-up 2s linear infinite;
}

@keyframes thumbs-up {
 25% {
  transform: rotate(20deg);
 }
 50%, 100% {
   transform: rotate(5deg);
 }
}

Unicode表情符号的颜色

8 个答案: