有没有人在使用iOS8.3的时候，在给字体指定颜色时遇到问题？

Question

我正试图在IOS 8.3上复制一个bug，我选中了一个复选框，箭头的颜色本来是绿色的，但实际上却是黑色的。

这是IOS的bug修复还是它不支持的东西？

这是我的SASS/css：

input[type="checkbox"] + .field-label-replaced {
    &:before {
        background-color: $C-Bg-Field;
        border:           1px solid $C-Border; // Use px value to cope with field edges disappearing when zooming out
        box-sizing:       border-box;
        color:            $GIP-OxfamGreen;
        content:          '';
        height:           $D-FieldElement;
        text-align:       center;
        width:            $D-FieldElement;
    }
}

input[type="checkbox"]:checked + .field-label-replaced {
    &:before {
        color:            $GIP-OxfamGreen;
        content:            '\2714';
    }
}

如果你想自己测试它，我有一个codepen帐户来说明这个问题。

http://codepen.io/mattclaffey/pen/EjNwRw

Answer 1

Unicode字符有一点有趣，因为它们因事物不同而显示不同。有时，它们还可以显示为全色元件，而不是使用单一色调，这意味着它不再受CSS color规则的影响。

以此为例：http://jsfiddle.net/f4joLkmg/

在chrome和safari中，该符号显示为带有蓝色雨滴的紫色雨伞，但在firefox中，它是单调图形，因此它采用了应用于它的red样式。

我没有IOS 8.3设备(正如评论中提到的出现问题的地方)，所以我不能测试复选标记符号是如何在那里显示的，但我假设该操作系统版本只是选择用特定的颜色集显示该符号，这意味着它不能再由文本颜色控制。

那么你是如何绕过它的呢？好吧，你在题目中提到了Font Awesome，但这里实际上并没有用到它。如果你已经加载了Font Awesome，你也可以直接使用它：

&:before {
    font-family: FontAwesome;
    color: $GIP-OxfamGreen;
    content: '\f00c';
}

如果您的项目中还没有使用Font Awesome。您可能仍然想考虑使用它，或者使用类似的东西来代替unicode符号。实际的图标字体在一致性方面总是会给你更好的效果，而且大多数时候符号看起来也会更好一些。