为什么Chrome会导致这些跨度图标的颜色不同？
我认为这是一个新版本的Chrome已经安装，因为这是唯一不同的事情，我能想到已经发生，但不能证明它。
我有一系列CSS跨类来显示不同的占星学图标，它们都应该是相同的颜色：
.ai {
display:inline-block;
margin-right:10px;
color:#74347a;
}
.ai.aries:before {
content:"\2648";
}
.ai.taurus:before {
content:"\2649";
}
.ai.gemini:before {
content:"\264A";
}
.ai.cancer:before {
content:"\264B";
}
.ai.leo:before {
content:"\264C";
}
.ai.virgo:before {
content:"\264D";
}
.ai.libra:before {
content:"\264E";
}
.ai.scorpio:before {
content:"\264F";
}
.ai.sagittarius:before {
content:"\2650";
}
.ai.capricorn:before {
content:"\2651";
}
.ai.aquarius:before {
content:"\2652";
}
.ai.pisces:before {
content:"\2653";
}在Chrome以外的每一个浏览器上，我都得到了预期的效果：
但在Chrome，似乎有一个非常奇怪的颜色循环，没有解释在督察。
我制作了一个JSFiddle，希望它能显示这些颜色，但只要在FireFox和Chrome中查看它，就会显示出正确的行为，这对任何人都没有帮助，所以它肯定在我的网站上。但没什么明显的。
我以为它会是引导CSS，我禁用了它，但它仍然存在。
回答 2
Stack Overflow用户
发布于 2016-09-09 11:48:53
在最新的Google版本(v53)中，支持彩色Emoji字体的字体Segoe (用于根据屏幕截图呈现这些特殊字符)是这样一种字体，每个字符都有预定义的颜色(甚至是多个)。因此，当其他浏览器仍然将图标(实际上是表情符号)呈现为灰色甚至黑色的时候，Chrome现在显示出了预期的颜色。
有关更多信息，请参见Google Chrome Changelog和OpenType字体中的颜色扩展。在Windows8.1中，微软增加了对字体的非官方颜色支持首次以Segoe字体实现：
一个重要的字体添加是Segoe字体和颜色字体支持。彩色字体使用OpenType字体规范的扩展。使用Segoe字体的彩色字体呈现允许使用可伸缩的全彩色符号字符显示，因为它们使用TrueType字形轮廓。在DWrite文本堆栈中支持彩色表情显示，并在Windows应用程序和Windows中使用的HTML应用程序UI框架中默认启用。
要在您的机器上测试它，您可以(我不建议卸载Segoe字体)卸载Segoe字体，然后所有图标应该返回到默认的UTF8字符，并在CSS中设置颜色。
Stack Overflow用户
发布于 2016-11-11 16:52:45
如果有人对解决办法感兴趣..。它可以使用背景颜色和css背景剪辑属性。在我的例子中，这是不够的，因为我用符号来表示十二生肖的符号，它们被渲染成彩色的盒子。所以我必须从使用符号实体切换到使用绕组字体。我不确定在Windows以外的操作系统中是否支持绕组，所以也许这不是最终的解决方案。
编辑:不管怎么说，这可能是一个解决方案，所有这些符号没有被困在一个充满的框或圆圈，不依赖色差来区分内容，如在以下片段中的打击：
.BigText {font-size: 30px}
.Windings {font-family: Wingdings;}
.SolidColorIcon {
background-color: dodgerblue;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
.GradientIcon {
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, dodgerblue), color-stop(0.4, skyblue), color-stop(0.6, pink));
background-image: gradient( linear, left bottom, left top, color-stop(0, dodgerblue), color-stop(0.4, skyblue), color-stop(0.6, pink));
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}<span class="BigText">
⚡ ♈ ^_`abcdefghi ⛎
</span><br>
<span class="BigText Windings">
⚡ ♈ ^_`abcdefghi ⛎
</span><br>
<span class="BigText Windings SolidColorIcon">
⚡ ♈ ^_`abcdefghi ⛎
</span><br>
<span class="BigText Windings GradientIcon">
⚡ ♈ ^_`abcdefghi ⛎
</span><br>
看起来，当字体大小大于162 It时，禁用字体编码的颜色，让您重新控制字体图标的样式
.big-character{
color: dodgerblue;
font-size: 163px;
}Ophiucus symbol is <span class="big-character">⛎ ⛎</span>
https://stackoverflow.com/questions/39409719
复制相似问题
腾讯云开发者
