Ошибка Unicode в CSS-содержимом WebKit?

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

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

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

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

Например, когда символы Unicode вставляются как содержимое 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 ...

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

5
задан Mathias Bynens 17 May 2012 в 19:35
поделиться