为什么Chrome会导致这些跨度图标呈现不同的颜色？

Question

我认为这与已安装的新版Chrome相关联,因为这是我能想到的唯一不同的东西,但无法证明.

我有一系列CSS span类来显示不同的占星术图标,这些图标应该是相同的颜色:

.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中,似乎有一个非常奇怪的色彩循环,Inspector中没有任何解释.

我做了一个JSFiddle,希望它会显示这些颜色,但只是在FireFox和Chrome中检查它,实际上显示了正确的行为,这对任何人都没有帮助,所以它必须在我的网站上.但没有什么明显的.

我认为这将是我禁用的Bootstrap CSS,但它仍然存在.

Answer 1

在彩色绘文字字体,最新的谷歌Chrome发布(V53)的支持已经被激活,字体的Segoe UI的表情符号(这是用来根据你的截图来呈现这些特殊字符)是这样的,其中每个角色都有预定颜色的字体(甚至多个).因此,虽然其他浏览器仍然以某种灰色甚至黑色呈现图标(实际上是表情符号),但Chrome现在显示了预期的颜色.

有关详细信息,请参阅Google Chrome更改日志和OpenType字体中的颜色扩展名.在Windows 8.1中,Microsoft 为字体添加了非官方的颜色支持,首先以Segoe UI Emoji字体实现:

一个重要的字体添加是Segoe UI表情符号字体和颜色字体支持.颜色字体使用OpenType字体规范的扩展名.使用Segoe UI Emoji字体的彩色字体渲染允许使用全彩色字形显示表情符号字符,这些字形也是可缩放的,因为它们使用TrueType字形轮廓.DWrite文本堆栈支持彩色表情符号显示,默认情况下在用于Windows应用商店应用和Windows shell的HTML和XAML应用程序UI框架中启用.

要在你的机器上进行测试,你可以(我不建议)卸载Segoe UI Emoji字体,然后所有图标应该回退到默认的UTF8字符,并且具有你在CSS中设置的颜色.

请参阅此讨论以及有关控制多色字体中字符颜色呈现的可能方法的当前提议.这将在CSS字体4中最早提供.