Html Unicode 表情符号的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32413731/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Color for Unicode Emoji
提问by mahemoff
It's possible to include Emoji characters in modern browsers, but how can one make it a single color and choose that color?
在现代浏览器中可以包含 Emoji 字符，但是如何使它成为单一颜色并选择该颜色？
For example, here is some Emoji and some regular (plane 0) Unicode symbols. All should be red, but only the symbols are rendered in red.
例如，这里有一些表情符号和一些常规（平面 0）Unicode 符号。所有的都应该是红色的，但只有符号呈现为红色。
Associated HTML + CSS:
相关的HTML + CSS：
<p>
</p>
<p>
?★?
</div>
p {
font-size: 3em;
color: red
}
回答by Tigran
Yes, you can color them!
是的，你可以给它们上色！
div {
color: transparent;
text-shadow: 0 0 0 red;
}<div></div>回答by Crissov
Not every emoji works the same. Some are old textual symbols that now have an (optional or default) colorful representation, others were explicitly (only) as emojis. That means, some Unicode codepoints should have two possible representations, textand emoji. Authors and users should be able to express their preference for one or the other. This is currently done with otherwise invisible variation selectorsU+FE0E (text, VS-15) and U+FE0F (emoji, VS-16), but higher-level solutions (e.g. for CSS)have been proposed.
并非每个表情符号的工作方式都相同。有些是旧的文本符号，现在具有（可选或默认）彩色表示，其他则明确（仅）作为表情符号。这意味着，一些 Unicode 代码点应该有两种可能的表示形式，text和emoji. 作者和用户应该能够表达他们对其中一个的偏好。这目前是通过其他不可见的变化选择器U+FE0E ( text, VS-15) 和 U+FE0F ( emoji, VS-16) 完成的，但是已经提出了更高级别的解决方案（例如用于 CSS）。
The text-style emojis are monochromatic and should be displayed in the foreground color, i.e. currentcolorin CSS, just like any other glyph. The Unicode Consortium provides an overview of emojis by style(beta version). You should be able to append ︎in HTML to select the textual variant with anything in the columns labeled “Default Text Style; has VSs” and “Default Emoji Style; has VSs”. This doesn't include the example emojis and many others, though.
文本样式的表情符号是单色的，应该以前景色显示，即currentcolor在 CSS 中，就像任何其他字形一样。Unicode Consortium按样式（测试版）提供了表情符号的概述。您应该能够︎在 HTML 中附加以选择带有标记为“默认文本样式”的列中的任何内容的文本变体；具有 VSs和“默认表情符号样式；有 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">🐘 🐧 🐼 ♥ ★ ℹ 💀 👌</p>
<p title="?★? with text variation selector 15">🐘︎ 🐧︎ 🐼︎ ♥︎ ★︎ ℹ︎ 💀︎ 👌︎</p>
<p title="?★? with emoji variation selector 16">🐘️ 🐧️ 🐼️ ♥️ ★️ ℹ️ 💀️ 👌️</p>
<p title="?★? with `text-shadow` hack" class="hack">🐘 🐧 🐼 ♥ ★ ℹ 💀 👌</p>
<p title="?★? with custom font" class="font">🐘 🐧 🐼 ♥ ★ ℹ 💀 👌</p>I've added U+1F480 Skull and U+1F44C OK Hand Sign because the background should show through their “eyes” and I've used numeric character references just to make the code more obvious and more robust against copy-and-paste errors.
我添加了 U+1F480 Skull 和 U+1F44C OK Hand Sign 因为背景应该通过他们的“眼睛”显示出来，我使用数字字符引用只是为了使代码更明显，更健壮地防止复制和粘贴错误.
It has been proposed, however, that both variation selectors can be applied to any character, which would have no effect in most cases. Note that some vendors, especially Samsung, are already shipping (default) emoji glyphs for several other characters(goo.gl/a4yK6por goo.gl/DqtHcc).
然而，有人提议，这两种变体选择器都可以应用于任何字符，这在大多数情况下不会产生任何影响。请注意，一些供应商，尤其是三星，已经为其他几个字符（goo.gl/a4yK6p或goo.gl/DqtHcc）提供（默认）表情符号字形。
回答by ADJenks
I wanted to do this myself so I've recently come up with a solution using newer CSS effects that works on Firefox and Edge as well.
我想自己做这个，所以我最近想出了一个使用较新的 CSS 效果的解决方案，它也适用于 Firefox 和 Edge。
Using filter, you first normalize the color by using sepia(1), you then saturate the heck out of it to get a pure red. If you want to get rid of black lines, suck the contrast out of the emoji before applying other filters using contrast(0). After that you just spin the colour wheel from red to whatever color you'd like using hue-rotate(). Note that because I used decimal values instead of %'s, a value of 100 means 10000%.
使用过滤器，您首先使用棕褐色（1）标准化颜色，然后饱和它以获得纯红色。如果您想去除黑线，请在使用对比度（0）应用其他过滤器之前从表情符号中吸取对比度。之后，您只需使用 Hue-rotate() 将色轮从红色旋转为您想要的任何颜色。请注意，因为我使用了十进制值而不是 %，所以 100 的值意味着 10000%。
Hue offsets are defined as beginning at red. We are lucky that sepia is mostly red so the wheel starts off perfectly at 0-degrees. You can calculate what offset you want using a RGB to HSL converter. I found a nice one written in Javascript here: https://web.archive.org/web/20180808220922/http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
色调偏移定义为从红色开始。我们很幸运，棕褐色大部分是红色的，因此车轮在 0 度时完美启动。您可以使用 RGB 到 HSL 转换器计算您想要的偏移量。我在这里找到了一个用 Javascript 编写的不错的：https://web.archive.org/web/20180808220922/http: //axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-模型-c
You must multiply the hue value by 360 to get the desired result from that function. An example would be rgbToHsl(0,100,100)[0]*360. Which would return 180. Since there is no red, this would be the expected result, you would be spinning 180 degrees away from red.
您必须将色调值乘以 360 才能从该函数中获得所需的结果。一个例子是rgbToHsl(0,100,100)[0]*360。这将返回 180。由于没有红色，这将是预期的结果，您将旋转 180 度远离红色。
As Litherium an Crissov pointed out, there are text emojis as well. These work better with transformations and often look better. You can't apply the method I have described above however, until you first apply invert(.5)on the text emojis, this is because the functions need some sort of shade to operate on. So simply adding invert(.5)to the beginning of each formula, allows for them to operate on both code points on all browsers.
正如 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: "F30D\FE0EC4\FE0EF60D\FE0EF431\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>Update: There are newer packages available on npm now that can calculate hues etc. You don't need to use that snippet on the website I had previously linked. Here's an example: https://stackoverflow.com/a/56082323/5078765
更新：现在 npm 上有更新的软件包可以计算色调等。您不需要在我之前链接的网站上使用该代码段。这是一个例子：https: //stackoverflow.com/a/56082323/5078765
回答by Jeremy Danyow
You can fill them with a solid color:
你可以用纯色填充它们：
p {
font-size: 20px;
color: transparent;
text-shadow: 0 0 0 blue;
}<p></p>
<p></p>
<p></p>Or you can outline them:
或者您可以概述它们：
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;
}<p title=""></p>
<p title=""></p>
<p title=""></p>回答by Litherum
Some, but not all, code points can be drawn in either text form (non-picture-based glyph) or emoji form (picture-based glyph). Unicode describes that these two forms can be selected by using one of two variation selectors: either U+FE0E (VARIATION SELECTOR-15) or U+FE0F (VARIATION SELECTOR-16). When drawn in non-picture-based form, the colorCSS property should apply.
一些（但不是全部）代码点可以以文本形式（非基于图片的字形）或表情符号形式（基于图片的字形）绘制。Unicode 描述了可以使用以下两种变体选择器之一来选择这两种形式：U+FE0E (VARIATION SELECTOR-15) 或 U+FE0F (VARIATION SELECTOR-16)。当以非基于图片的形式绘制时，color应应用 CSS 属性。
Example:
例子：
U+2603 (SNOWMAN) is drawn this way: ?
U+2603 (SNOWMAN) 是这样画的： ?
The sequence of code points U+2603 U+FE0E is drawn this way: ??
码点序列 U+2603 U+FE0E 是这样绘制的： ??
The sequence of code points U+2603 U+FE0F is drawn this way: ??
码点序列U+2603 U+FE0F是这样绘制的：??
More information, along with a full list of the code points which participate in these variation sequences, can be found at http://unicode.org/emoji/charts/emoji-variants.html
更多信息以及参与这些变化序列的代码点的完整列表，可以在http://unicode.org/emoji/charts/emoji-variants.html 找到
(Note that different operating systems may choose a different default when the bare code point is used. For example, try viewing this post in macOS and iOS - the bare code point above looks different!)
（注意，不同的操作系统在使用裸代码点时可能会选择不同的默认值。例如，尝试在 macOS 和 iOS 中查看此帖子 - 上面的裸代码点看起来不一样！）
回答by Nick Parsons
If you want to keep the details within the emoji you can use filter: url(svg)where url()will take an svg filter
如果你想在表情符号中保留细节，你可以使用filter: url(svg)where url()will take a svg 过滤器
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>While the use of feColorMatrixmay seem daunting at first, it is actually straight forward to define your own colors. Take the following example which represents the color red:
虽然一开始使用feColorMatrix似乎令人生畏，但定义自己的颜色实际上很简单。以下面代表红色的例子为例：
1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0
If you grab the boldvalues from above, we can see how they relate to the RGBA color mode:
如果您从上面获取粗体值，我们可以看到它们与 RGBA 颜色模式的关系：
1 - red (r) 0 - green (g) 0 - blue (b) 1 - alpha (a)
Here each color relates to a value from 0 to 255 divided by 255. Thus, if you had the color green, which has a RGBA of:
这里每种颜色都与 0 到 255 除以 255 的值相关。因此，如果您有绿色，其 RGBA 为：
R G B A (0, 255, 0, 1)
Then your values would be:
那么你的价值观是：
0/255 -> 0 (r) 255/255 -> 1 (g) 0/255 -> 0 (b) 1 -> 1 (a) - don't divide
And so, using these values in our matrix we get:
因此，在我们的矩阵中使用这些值，我们得到：
0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0
You can now add this as an additional filter (or remove the old one) and give it an idso that it can be referenced within css filter: url(#filterID)
您现在可以将其添加为附加过滤器（或删除旧过滤器）并给它一个，id以便它可以在 css 中引用filter: url(#filterID)
See implemented version below:
请参阅下面的实施版本：
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 referenced 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>Please noteCurrently, this solution has very limited browser support. To see a full list of browsers supported by this feature please see here.
请注意目前，此解决方案的浏览器支持非常有限。要查看此功能支持的浏览器的完整列表，请参见此处。
回答by mahemoff
As Emoji is quite new, styling it is not yet supported natively.
由于表情符号很新，因此本机尚不支持对其进行样式设置。
The workaround is to use an Emoji font such as Twitter's Twemoji. Then it can be styled much the same way Font Awesome or native Unicode can be styled.
解决方法是使用表情符号字体，例如Twitter 的 Twemoji。然后它的样式可以与 Font Awesome 或原生 Unicode 的样式大致相同。
回答by Ir Calif
IF YOU NEED TO USE CSS AFTER,BEFORE PSEUDO ELEMENT YOU CAN PROCED LIKE THIS
如果你需要在之后使用 CSS，在伪元素之前你可以像这样进行
<span class="react-thumb-fly" title="Aimé">
<button class="react-toggle-icon-thumb"></button>
</span>
THEN WRITE THIS FOR CSS
然后为 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);
}
}
