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上描述行为的评论。

Answer 1

这是a bug in WebKit，最近才得到修复（2012年4月）。

解释my write-up on escape sequences for CSS identifiers：

理论上（根据规范），any character can be escaped based on its Unicode code point（例如，U + 1D306“四分位数为中心”符号：\1d306或\01d306），但是older WebKit browsers don’t support this syntax for characters outside the BMP。

由于浏览器错误，还有另一种（non-standard）方式来转义这些字符，即以UTF-16代码单位（例如\d834\df06）分解它们，但这种语法（正确地） Gecko ++和Opera 12 ++。
不支持
由于目前no way以跨浏览器方式逃脱non-BMP symbols，因此最好只使用未转义的这些字符。

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

我也发了a tool to help you with CSS escapes，如果您输入非BMP字符，它会发出警告：

WebKit CSS内容Unicode bug？

1 个答案: