Unicode表情符号的颜色
mah*_*off 36 html css unicode emoji
可以在现代浏览器中包含表情符号,但是如何才能使它成为单一颜色并选择那种颜色呢？
例如,这里有一些表情符号和一些常规(平面0)Unicode符号.全部应为红色,但只有符号以红色显示.
关联的HTML + CSS:
<p>
</p>
<p>
???
</div>
p {
font-size: 3em;
color: red
}
Tig*_*ran 68
是的,你可以为它们着色!
div {
color: transparent;
text-shadow: 0 0 0 red;
}<div></div>- 这是Mac独家:-P,因为它不适用于Windows 10(在任何浏览器中). (5认同)
- 在Chrome 53中,它适用于大纲,是的.但这在Firefox 49中不起作用(表情符号保持不变) (4认同)
- 好一个!我将它转换为堆栈代码段.不幸的是,这只能做剪影,因为透明度没有真正的编码.所以,例如,笑脸呈现与鬼脸相同.毫无疑问,我们可以做很多事情. (3认同)
- 谢谢,@ nylki.出来有关于该主题的错误报告 - https://bugzilla.mozilla.org/show_bug.cgi?id=1128190,由于某种原因被标记为已解决.我在那里添加了评论.让我们等待Mozilla的回应. (3认同)
- `color:transparent`在Firefox版本61.0.1(在Ubuntu Linux上)不起作用.所有普通文本都变得透明,但全彩色表情符号不受影响. (3认同)
Cri*_*sov 27
并非每个表情符号都是一样的.一些是旧的文本符号,现在具有(可选的或默认的)彩色表示,其他的显式(仅)作为表情符号.这意味着,一些Unicode代码点应该有两种可能的表示形式,text和emoji.作者和用户应该能够表达他们对一个或另一个的偏好.目前,这是用其他不可见变化选择器 U + FE0E(text,VS-15)和U + FE0F(emoji,VS-16)完成的,但是已经提出了更高级别的解决方案(例如用于CSS).
文本风格的表情符号是单色的,应该以前景色显示,即currentcolor在CSS中,就像任何其他字形一样.Unicode Consortium 按样式(beta版本)提供了表情符号的概述.您应该能够︎在HTML中附加文本变体,其中包含标记为"默认文本样式"的列中的任何内容; 有VSs "和"默认表情符号样式; 有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">🐘 🐧 🐼 ♥ ★ ℹ 💀 👌</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>我添加了U + 1F480 Skull和U + 1F44C OK手势,因为背景应该通过他们的"眼睛"显示,我使用数字字符引用只是为了使代码更加明显,更加强大,防止复制和粘贴错误.
然而,已经提出,两个变化选择器都可以应用于任何角色,这在大多数情况下都没有效果.请注意,某些供应商(尤其是三星)已经为其他几个字符(goo.gl/a4yK6p或goo.gl/DqtHcc)提供(默认)表情符号字形.
- 尽管 http://unicode.org/faq/vs.html 现在是官方常见问题解答页面，但 unicode.org 上变体选择器文档的链接似乎已关闭。 (2认同)
Jer*_*yow 16
你可以用纯色填充它们:
p {
font-size: 20px;
color: transparent;
text-shadow: 0 0 0 blue;
}<p></p>
<p></p>
<p></p>或者您可以概述它们:
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>adj*_*nks 16
我想自己这样做,所以我最近提出了一个解决方案,使用适用于Firefox和Edge的新CSS效果.
使用过滤器,首先使用棕褐色(1)对颜色进行标准化,然后将其从中浸透以获得纯红色.如果你想摆脱黑色线条,在使用对比度(0)应用其他滤镜之前,先从表情符号中吸取对比度.之后,您只需使用hue-rotate()将色轮从红色旋转到您想要的任何颜色.请注意,因为我使用十进制值而不是%'s,值100表示10000%.
色调偏移定义为从红色开始.我们很幸运,棕褐色大多是红色的,所以轮子在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)文本emojis,这是因为函数需要某种阴影来操作.因此,只需添加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>如果你想在表情符号中保留细节，你可以使用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>虽然一开始使用feColorMatrix似乎令人生畏，但定义自己的颜色实际上很简单。以下面代表红色的例子为例：
1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0
如果您从上面获取粗体值，我们可以看到它们与 RGBA 颜色模式的关系：
1 - 红色 (r) 0 - 绿色 (g) 0 - 蓝色 (b) 1 - 阿尔法 (a)
这里每种颜色都与 0 到 255 除以 255 的值相关。因此，如果您有绿色，其 RGBA 为：
RGBA (0, 255, 0, 1)
那么你的价值观是：
0/255 -> 0 (r) 255/255 -> 1 (克) 0/255 -> 0 (b) 1 -> 1 (a) - 不要划分
因此，在我们的矩阵中使用这些值，我们得到：
0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0
您现在可以将其添加为附加过滤器（或删除旧的过滤器）并给它一个，id以便它可以在 css 中引用filter: url(#filterID)
请参阅下面的实施版本：
1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0
1 - red (r) 0 - green (g) 0 - blue (b) 1 - alpha (a)
<feColorMatrix /> 颜色矩阵生成器：
为方便起见，我制作了一个feColorMatrix生成器，它允许您选择或输入颜色以及不透明度，并从该颜色生成 feColorMatrix：
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
0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0
请注意目前，此解决方案对浏览器的支持非常有限。要查看此功能支持的浏览器的完整列表，请参见此处。
一些（但不是全部）代码点可以以文本形式（非基于图片的字形）或表情符号形式（基于图片的字形）绘制。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 中查看此帖子 - 上面的裸码点看起来不一样！）