Содержимое WebKit CSS Unicode?

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

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

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

За исключением Safari (Windows), эта проблема возникает только тогда, когда я вставляю символы Юникода через свойство CSS содержимого . Если я вставляю символ непосредственно в HTML, используя ссылку на символ , он отображается правильно.

Например, когда символы Юникода вставляются в качестве содержимого CSS …

/* CSS: */ span.css_font_icon:before { display: inline; font-family: "Ghodmode Icons", "Webdings", sans-serif; content: '\002302 \01F4A1 \00270D \002139'; }   

… все они отображаются в Firefox, Opera и Internet Explorer, но второй (\ 01F4A1) не отображается ни в каких браузерах Webkit в Linux, Windows или Android. Вместо этого он показывает глиф по умолчанию (в браузерах Android) или алмаз с вопросительным знаком внутри него (Chrome (Windows), Safari (Windows)).

Вставка символов с использованием ссылок на символы HTML Unicode …

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

… отлично работает в Firefox, Opera и Internet Explorer. Chrome (Windows) и Android Webkit также показывают символ из ссылки на HTML-символ, но Safari (Windows) показывает глиф по умолчанию.

Я сжал исходный код на маленькую страницу, которая воспроизводит проблему: http://www.ghodmode.com/testing/unicode-insertion/

Я наткнулся на необычную ошибку WebKit, или я делаю что-то неправильно?

У меня нет текущего устройства iOS для проверки этого, поэтому комментарии, описывающие поведение на iPhone / iPad, также приветствуются.

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

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

    В теории (согласно спецификации) любой символ может быть экранирован на основе его кодовой точки Юникода (например, для 𝌆 , символа UT + 1D306 «tetragram for center»: \1d306 или \01d306 ), но более старые браузеры WebKit не поддерживают этот синтаксис для символов вне BMP .

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

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

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

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

    Давайте будем гением компьютера.