相关疑难解决方法(0)

WebKit CSS内容Unicode bug?

在一个页面上,我使用自定义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>
Run Code Online (Sandbox Code Playgroud)

......它们都在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>
Run Code Online (Sandbox Code Playgroud)

...在Firefox,Opera和Internet Explorer中运行良好.Chrome(Windows)和Android Webkit浏览器也会显示HTML字符引用中的符号,但Safari(Windows)会显示默认字形.

我已经将原始代码压缩成一个小页面来重现问题:http://www.ghodmode.com/testing/unicode-insertion/

我偶然发现了一个不寻常的WebKit错误,或者我做错了什么?

我没有当前的iOS设备来测试它,因此也欢迎在iPhone/iPad上描述行为的评论.

css safari webkit google-chrome

5
推荐指数
1
解决办法
8783
查看次数

标签 统计

css ×1

google-chrome ×1

safari ×1

webkit ×1