css - 为什么 Chrome 会导致这些 span 图标呈现不同的颜色？

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

在最新的谷歌浏览器版本 (v53) 中，对彩色表情符号字体的支持已经激活，字体 Segoe UI 表情符号(根据您的屏幕截图用于呈现这些特殊字符)是一种每个字符都有预定义颜色的字体(甚至多个)。因此，虽然其他浏览器仍然以某种灰色甚至黑色渲染图标(实际上是表情符号)，但 Chrome 现在显示了预期的颜色。

参见 Google Chrome Changelog和 color extension in OpenType fonts了解更多信息。在 Windows 8.1 中，微软 added unofficial color support to fonts ，首先在 Segoe UI Emoji 字体中实现:

A significant font addition is the Segoe UI Emoji font, and color font support. Color fonts use an extension to the OpenType font specification. Color font rendering using the Segoe UI Emoji font allows emoji symbol characters to be displayed using full-color glyphs that are also scalable because they use TrueType glyph outlines. Color emoji display is supported in the DWrite text stack and enabled by default in the HTML and XAML application UI frameworks used for Windows Store apps and in the Windows shell.

要在你的机器上测试它，你可以(我不建议这样做)卸载 Segoe UI Emoji 字体，然后所有图标都应该回退到默认的 UTF8 字符并具有你在 CSS 中设置的颜色。

参见 this discussion和 current proposal关于控制多色字体中字符颜色渲染的可能方法。这将最早在 CSS Fonts 4 中提供。