在一个页面上,我使用自定义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">⌂💡✍ℹ</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上描述行为的评论.