На одной странице я использую пользовательский веб-шрифт (используя @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">⌂💡✍ℹ</span>
... отлично работает в Firefox, Opera и Internet Explorer. В браузерах Chrome (Windows) и Android Webkit также отображается символ из ссылки на символ HTML, но Safari (Windows) показывает глиф по умолчанию.
Я сжал исходный код на маленькую страницу, которая воспроизводит проблему: http://www.ghodmode.com/testing/unicode-insertion/
Я наткнулся на необычную ошибку WebKit, или я делаю что-то неправильно?
У меня нет текущего устройства iOS для проверки этого, поэтому комментарии, описывающие поведение на iPhone/iPad, также приветствуются.