WebKit CSS 内容 Unicode 错误？答案

【问题标题】：WebKit CSS content Unicode bug?WebKit CSS 内容 Unicode 错误？
【发布时间】：2012-03-03 17:35:55
【问题描述】：

在一个页面上，我使用自定义网络字体（使用@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 上的行为的 cmets。

【问题讨论】：

标签： css google-chrome safari webkit

【解决方案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字符，它会警告你：

【讨论】：