WebKit CSS 内容 Unicode 错误？

发布于 2025-01-04 05:48:45 字数 1715 浏览 4 评论 0原文

在一页上，我使用自定义网页字体（使用 @font -face）用于图标。该集中的每个字符都有一个适当的 Unicode 值。

在基于 WebKit 的浏览器（Chrome、Safari、Android）中，不会显示其中一个字形。相反，会显示默认字形或内部带有问号的菱形。

在 Firefox、Opera 甚至 Internet Explorer 中，字符都可以正确呈现。

除 Safari (Windows) 外，仅当我通过内容 CSS 属性。如果我使用字符引用将字符直接插入 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 上的任何 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 bug，或者我做错了什么？

我没有当前的 iOS 设备来测试这一点，因此也欢迎描述 iPhone / iPad 上的行为的评论。

原文

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">⌂💡✍ℹ</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.

分享到QQ

分享到微博