WebKit CSS内容Unicode bug？

Question

在一个页面上,我使用自定义Web字体(使用@ font-face)作为图标.集合中的每个字符都具有适当的Unicode值.

在基于WebKit的浏览器(Chrome,Safari,Android)中,未显示其中一个字形.而是显示默认字形或其内部带有问号的菱形.

在Firefox,Opera甚至Internet Explorer中,字符都可以正确呈现.

除了Safari(Windows),只有当我通过内容 CSS属性插入Unicode字符时才会出现此问题.如果我使用字符引用将字符直接插入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上描述行为的评论.

Answer 1

这是WebKit中的一个错误,最近才修复(2012年4月).

为了解释我对CSS标识符的转义序列的描述:

理论上(根据规范),任何字符都可以基于其Unicode代码点进行转义(例如, the U+1D306 “tetragram for centre” symbol: \1d306或\01d306),但较旧的WebKit浏览器不支持此字符的语法在BMP之外.

由于浏览器错误,还有另一种(非标准)方法来转义这些字符,即以UTF-16代码单元(例如\d834\df06)分解它们,但Gecko ++和Opera不支持这种语法(正确地)12 ++.

由于目前无法以跨浏览器方式转义非BMP符号,因此最好只使用未转义的这些字符.

在您的情况下,U + 1F4A1字符是补充(非BMP)符号.所有其他符号都是BMP字符,因此不受错误的影响.

我还制作了一个工具来帮助你解决CSS转义问题,如果输入非BMP字符,它会发出警告: