WebKit CSS контент Unicode ошибка?

Question

На одной странице я использую собственный веб-шрифт (используя @ font-face) для иконок. Каждый символ в наборе имеет соответствующее значение Unicode.

В браузерах на основе WebKit (Chrome, Safari, Android) один из глифов не отображается. Вместо этого отображается глиф по умолчанию или ромб с вопросительным знаком внутри.

В Firefox, Opera и даже Internet Explorer символы отображаются правильно.

За исключением Safari (Windows), эта проблема возникает, только когда я вставляю символы Unicode через свойство 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) не отображается ни в одном браузере Webkit на Linux, Windows или Android. Вместо этого он показывает глиф по умолчанию (в браузерах Android) или ромб с вопросительным знаком внутри (Chrome (Windows), Safari (Windows)).

Вставка символов с использованием ссылок на символы Юникода в HTML...

/* 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 также приветствуются.

Answer 1

Эта ошибка в WebKit исправлена только недавно (в апреле 2012 года).

Перефразируя мою рецензию на escape-последовательности для идентификаторов CSS:

В теории (согласно спецификации) любой символ может быть экранирован на основе его кодовой точки Unicode (например, для символ U+1D306 "тетраграмма для центра": \1d306 или же \01d306), но старые браузеры WebKit не поддерживают этот синтаксис для символов за пределами BMP.

Из-за ошибок браузера существует другой ( нестандартный) способ экранирования этих символов, а именно путем разбиения их на кодовые единицы UTF-16 (например, \d834\df06), но этот синтаксис (по праву) не поддерживается в Gecko ++ и Opera 12++.

Поскольку в настоящее время нет способа избежать символов, отличных от BMP, в кросс-браузерном режиме, лучше всего использовать эти символы без экранирования.

В вашем случае символ U+1F4A1 является дополнительным (не BMP) символом. Все остальные символы являются символами BMP, поэтому ошибка не влияет на них.

Я также сделал инструмент, который поможет вам с выходами CSS, и он предупреждает вас, если вы вводите не-BMP символ: