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

我认为这与安装的新版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以外的每一款浏览器上，我都能获得理想的效果：

但在铬合金中，似乎有一个非常奇怪的颜色循环，在Inspector中没有解释

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

我原以为它会是引导CSS，我禁用了它，但它仍然存在

---

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

有关详细信息，请参阅和。在Windows 8.1中，Microsoft首先在Segoe UI表情符号字体中实现：

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

要在您的机器上测试它，您可以（我不建议这样做）卸载Segoe UI表情字体，然后所有图标都应返回到默认的UTF8字符，并具有您在CSS中设置的颜色

---

有关控制多色字体中字符颜色呈现的可能方法，请参阅和。如果有人对解决方案感兴趣，这将最早在CSS字体4中提供。。。 它可以使用背景色和css背景剪辑属性。在我的例子中，这是不够的，因为我使用的是黄道带符号，它们被渲染为彩色框。因此，我必须从使用符号实体切换到使用字体。我不确定Windows以外的操作系统是否支持Winds，所以这可能不是最终的解决方案

编辑：无论如何，这可能是一个解决方案，用于所有那些没有被困在填充框或圆圈中的符号，并且不依赖颜色差异来区分内容，如以下代码段中的删除：

.BigText{font size:30px}
.winds{font-family:Wingdings；}
.SolidColorIcon{
背景色：淡蓝色；
颜色：透明；
-webkit背景剪辑：文本；
背景剪辑：文本；
}
.梯度诱导{
背景图像：-webkit渐变（线性、左下、左上、色挡（0，道奇蓝）、色挡（0.4，天蓝色）、色挡（0.6，粉色））；
背景图像：渐变（线性，左下，左上，颜色停止（0，道奇蓝），颜色停止（0.4，天蓝色），颜色停止（0.6，粉色））；
颜色：透明；
-webkit背景剪辑：文本；
背景剪辑：文本；
}

⚡和9800 ^ abcdefghi和9934


⚡和9800 ^ abcdefghi和9934


⚡和9800 ^ abcdefghi和9934


⚡和9800 ^ abcdefghi和9934

您是否已使用inspector查看受影响的元素？是否有任何意外的类或规则应用于它们？可能这些元素继承了其他元素或类似元素的规则？没有额外的类，并且在inspector中显示了CSS中的设置颜色，这不会被任何其他内容覆盖。这里没有提到任何其他颜色。您是否可以尝试创建一个针对

：before

和

：after

元素的规则，以明确设置

颜色

，并查看这是否会影响它？e、 g.

.ai:before.ai:after{color:#74347a；}

您甚至可以尝试使用

！重要信息

。不幸的是，每个人都会在黑暗中被刺伤，因为用你提供的代码重新创建你的错误几乎是不可能的。一些chrome插件可能会覆盖颜色？它肯定使用本机字体，但即使将字体规定为通用

Arial，sans serif

也会输出同样的内容。这让我相信这纯粹是由于浏览器渲染。为此，我确实尝试阅读了新版本的更改列表，但我认为我只是阅读了最新的subversion更改，而根本没有提及这一点。我想现在的新问题是，我们能阻止这种覆盖发生吗？有没有办法控制这里正在发生的着色？这是一个非常新的东西，我不是在Windows机器上工作。有一种方法可以通过Windows注册表避免使用Segoe UI表情字体，但这既不推荐，也不会影响您未来网站的Windows访问者。由于颜色属性似乎没有改变，您是否尝试显式地将字体设置为

.ai

类？是的，我只将标准

字体系列：Arial，san serif

添加到

ai

类，就在颜色下方，没有任何区别。似乎是一件很烦人的事！更重要的是，默认情况下删除标题中的Wordpress表情符号样式也不会对这一点产生任何影响。我刚刚发现了一些建议，让CSS能够控制多色字体的呈现，我会将其添加到答案中。因此，简短的回答是，可能还不可能覆盖字体的颜色。回答很好，@Paul！李尔王