WebKit CSS контент Unicode ошибка? - PullRequest
Новая
       19

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

5 голосов
/ 11 февраля 2012

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

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

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

За исключением Safari (Windows), эта проблема возникает, только когда я вставляю символы Юникода через свойство 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';
}

<!-- 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.

1 Ответ

5 голосов
/ 17 мая 2012

Это ошибка в 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 символ:

...