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

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

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

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

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

Например, когда символы Юникода вставляются в качестве содержимого 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 в формате 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, или я делаю что-то неправильно?

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

Ответы

Ответ 1

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

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

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

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

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

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

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