html - CSS Unicode 复选标记/刻度在 Windows 8.1/Firefox 版本 32 中变为绿色/红色

Question

更新到 Firefox 版本 32 后，我网站上所有粗重的复选标记/勾号都已更新为可爱的不符合放射性的绿色。

这个问题似乎只存在于 WINDOWS 8.1 和 FIREFOX V32

---

UNICODE 样本

(✔, ☑, ✖,)

U+237B ⍻ not check mark
U+2610 ☐ ballot box
U+2611 ☑ ballot box with check (GREEN)
U+2705 ✅ white heavy check mark
U+2713 ✓ check mark
U+2714 ✔ heavy check mark (GREEN)
U+2716 ✖ Heavy multiplication (RED)

FIREFOX V32 (屏幕截图)

CHROME V37 (屏幕截图)

这不是 Firefox 版本 31 中的问题像其他文本一样使用 css color 属性管理的刻度。

---

问题

1. 如何在所有流行的现代浏览器中管理 unicode 刻度的颜色？
2. 为什么，为什么，为什么？ (我可以理解默认设置，但覆盖设置似乎不合逻辑，我敢打赌这是对手机/平板电脑的补偿)。

---

在 FIREBUG 中查看此帖子来源的屏幕截图还是绿色! :o

---

TEST AREA

Answer 1

请查看以下 URL，它会显示问题的原因:https://bugzilla.mozilla.org/show_bug.cgi?id=1054780

特别是 Gijs Kruitbosch 的这篇文章似乎很好地总结了这个问题并提供了一个可能的解决方法:

This is reproducible on Nightly on Windows 8.1. AFAICT Segoe UI Emoji is new in Windows 8, and that's what's causing issues here.

There might be a way to turn off Windows's coloring for the font (apparently this exists in XAML, but perhaps only for Windows Phone, and I don't know if they expose that any other way), which would be one option.

The simpler option seems to be using Segoe UI Symbol instead, which has at least all of these characters (I'm unfamiliar enough with unicode that I don't know if/when this is a complete substitution for the Emoji variant of the font, and/or for what ranges).

使用 Segoe UI Symbol 的建议似乎确实有效，将示例中的 CSS 更改为:

div {
    background:#111;
    color:#fff;
    font-family: Segoe UI Symbol;
}

再次产生白色刻度。

更新的 CSS 卡片示例: http://cssdeck.com/labs/dzemruoi

如果您不想在它自己的单独容器中包围刻度以更改font-family，则可以指定Segoe UI Symbol作为后备和勾号仍会正确显示，而其他文本将采用首选字体:

div {
    background:#111;
    color:#fff;
    font-family: arial, Segoe UI Symbol;
}

带有其他文本的 CSS deck 示例: http://cssdeck.com/labs/gzgwlhpb