Содержимое 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:
