Lee Lee - 21 days ago 8
CSS Question

Why is Chrome is causing these span icons to be in different colours?

I think this is linked to a new version of Chrome that's been installed as that's the only thing different I can think of that has occured, but can't prove it.

I have a series of CSS span classes to show different astrology icons, which should all be the same colour as this:

.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";
}


On every browser other than Chrome, I get the desired effect:
enter image description here

But then in Chrome, there seems to be a very strange colour cycle going on, with no explanation in Inspector.

enter image description here

enter image description here

I made a JSFiddle, hoping it would show these colours, but just checking it in FireFox and Chrome, actually shows the proper behaviour, which isn't helpful to anyone, so it must be on my site. But there's nothing obvious.

I thought it would be the Bootstrap CSS, which I disabled, but it's still there.

enter image description here

Answer

In the latest Google Chrome release (v53) support for Color Emoji fonts has been activated, the font Segoe UI Emoji (which is used to render these special characters according to your screenshot) is such a font where each character has predefined colors (even multiple). So, while other browsers still render the icons (emojis actually) in some shade of grey or even black, Chrome now shows the intended color.

See Google Chrome Changelog and the color extension in OpenType fonts for further information. In Windows 8.1, Microsoft added unofficial color support to fonts, first implemented in the Segoe UI Emoji font:

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.

To test it on your machine, you could (I do not advise to though) uninstall the Segoe UI Emoji font, all icons should then fallback to the default UTF8 characters and have the color you set in CSS.

See this discussion and the current proposal about possible ways to control the colour rendering of characters in a multi-colour font. This will be available earliest in CSS Fonts 4.

Comments