WebKit CSS内容Unicode错误？

Question

在一个页面中，我使用自定义网络字体（使用 @font-face）来显示图标。每个字符集都有适当的Unicode值。

在基于WebKit的浏览器（Chrome、Safari、Android）中，其中一个字形不会被显示。相反，会显示默认字形或带有问号钻石的符号。

在Firefox、Opera甚至Internet Explorer中，所有字符都会正确地呈现。

除了Safari（Windows）之外，只有在通过content CSS属性插入Unicode字符时才会出现此问题。如果我直接使用character reference将字符插入HTML中，则可以正确呈现。

例如，当Unicode字符作为CSS内容插入时...

/* CSS: */
span.css_font_icon:before {
    display: inline;
    font-family: "Ghodmode Icons", "Webdings", sans-serif;
    content: '\002302 \01F4A1 \00270D \002139';
}

<!-- HTML -->
<span class="css_font_icon"></span>

这些字符在Firefox，Opera和Internet Explorer中都能显示，但第二个字符(\01F4A1)在Linux、Windows和Android上的任何Webkit浏览器中都无法显示。相反，在Android浏览器中显示默认字形，而在Chrome（Windows）和Safari（Windows）中显示带有问号钻石。

使用HTML Unicode字符引用插入字符...

/* CSS: */
span.html_font_icon {
    font-family: "Ghodmode Icons", "Webdings", sans-serif;
}

<!-- HTML: -->
<span class="html_font_icon">&#x2302;&#x1F4A1;&#x270D;&#x2139;</span>

在Firefox、Opera和Internet Explorer中正常工作。 Chrome（Windows）和Android Webkit浏览器也从HTML字符引用中显示符号，但Safari（Windows）显示默认字形。

我将原始代码压缩到一个小页面中以重现问题：http://www.ghodmode.com/testing/unicode-insertion/

我是否遇到了不寻常的WebKit错误，还是我做错了什么？

我没有当前的iOS设备来测试这个问题，因此也欢迎描述iPhone / iPad上行为的评论。

- user166560

Answer 1

这是一个关于WebKit中的错误，直到最近（2012年4月）才得以修复。

为了简述我的有关CSS标识符转义序列的文章：

理论上（根据规范），任何字符都可以根据其Unicode代码点进行转义（例如对于，U+1D306“中心的四字图案”符号：\1d306或\01d306），但是较旧的WebKit浏览器不支持这种语法用于BMP之外的字符。由于浏览器存在错误，还有另一种（非标准）方法来转义这些字符，即通过UTF-16代码单元将它们分解（例如\d834\df06），但是这种语法（正确地）不受Gecko和Opera 12支持。由于当前没有办法以跨浏览器的方式转义BMP之外的符号，所以最好只使用这些未经转义的字符。

在您的情况下，U+1F4A1字符是一个补充（非BMP）符号。所有其他符号都是BMP字符，因此不受该错误影响。

我还制作了一款帮助您处理CSS转义字符的工具，如果您输入了非BMP字符，它会发出警告：

- Mathias Bynens