WebKit CSS内容Unicode错误？ [英] WebKit CSS content Unicode bug?

问题描述

在一页上，我使用自定义网络字体（使用 @ font-face ）。

在基于WebKit的浏览器（Chrome，Safari，Android）中，其中一个字形不会显示。

在Firefox，Opera甚至Internet Explorer中，字符都会正确显示。

除了Safari（Windows），这个问题只发生在我通过 content CSS属性。如果我使用字符引用将字符直接插入HTML

$ b 例如，当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插入/

我是否偶然遇到了一个不寻常的WebKit错误，或者我做错了什么？

我没有当前的iOS设备进行测试，因此欢迎在iPhone / iPad上描述行为的评论。

解决方案

这是 WebKit中的错误，只有固定的最近（2012年4月）。

要转述我写了CSS标识符的转义序列：

在理论上（按照规范），任何字符都可以根据其Unicode代码点进行转义（例如

On one page, I'm using a custom web font (using @font-face) for icons. Each character in the set has an appropriate Unicode value.

In WebKit-based browsers (Chrome, Safari, Android), one of the glyphs isn't shown. Instead, the default glyph or a diamond with a question-mark inside of it is shown.

In Firefox, Opera, and even Internet Explorer, the characters are all rendered properly.

Except for Safari (Windows), this problem only occurs when I insert the Unicode characters via the content CSS property. If I insert the character directly into the HTML using a character reference, it renders properly.

For example, when the Unicode characters are inserted as CSS content ...

/* 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>

... they all show in Firefox, Opera, and Internet Explorer, but the second one (\01F4A1) doesn't show in any Webkit browsers on Linux, Windows, or Android. Instead, it shows the default glyph (on Android browsers) or a diamond with a question-mark inside of it (Chrome (Windows), Safari (Windows)).

Inserting the characters using HTML unicode character references ...

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

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

... works fine in Firefox, Opera, and Internet Explorer. Chrome (Windows), and Android Webkit browsers also show the symbol from the HTML character reference, but Safari (Windows) shows the default glyph.

I've condensed the original code into a small page that reproduces the problem: http://www.ghodmode.com/testing/unicode-insertion/

Have I stumbled into an unusual WebKit bug, or am I doing something wrong?

I don't have a current iOS device to test this on, so comments describing the behavior on iPhone / iPad are also welcome.

解决方案

This is a bug in WebKit that only got fixed recently (in April 2012).

To paraphrase my write-up on escape sequences for CSS identifiers:

In theory (as per the spec), any character can be escaped based on its Unicode code point (e.g. for

这篇关于WebKit CSS内容Unicode错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！