En una página, estoy usando una fuente web personalizada (usando @font-face) para los iconos. Cada carácter en el conjunto tiene un valor Unicode apropiado.WebKit Contenido CSS Unicode error?
En los navegadores basados en WebKit (Chrome, Safari, Android), uno de los glifos no se muestra. En su lugar, se muestra el glifo predeterminado o un diamante con un signo de interrogación dentro de él.
En Firefox, Opera e incluso en Internet Explorer, todos los caracteres se representan correctamente.
A excepción de Safari (Windows), este problema solo se produce cuando inserto los caracteres Unicode a través de la propiedad content CSS. Si inserto el carácter directamente en el HTML usando un character reference, se renderiza correctamente.
Por ejemplo, cuando los caracteres Unicode se insertan como contenido 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>
... todos ellos muestran en Firefox, Opera e Internet Explorer, pero el segundo (\ 01F4A1) doesn No se muestra en ningún navegador Webkit en Linux, Windows o Android. En cambio, muestra el glifo predeterminado (en los navegadores Android) o un diamante con un signo de interrogación dentro de él (Chrome (Windows), Safari (Windows)).
Inserción de los personajes usando referencias de caracteres Unicode HTML ...
/* CSS: */
span.html_font_icon {
font-family: "Ghodmode Icons", "Webdings", sans-serif;
}
<!-- HTML: -->
<span class="html_font_icon">⌂💡✍ℹ</span>
... funciona bien en Firefox, Opera e Internet Explorer. Los navegadores Chrome (Windows) y Android Webkit también muestran el símbolo de la referencia de caracteres HTML, pero Safari (Windows) muestra el glifo predeterminado.
He condensa el código original en una pequeña página que reproduce el problema: http://www.ghodmode.com/testing/unicode-insertion/
¿He caído en un error de WebKit inusual, o estoy haciendo algo mal?
No tengo un dispositivo iOS actual para probar esto, por lo que los comentarios que describen el comportamiento en iPhone/iPad también son bienvenidos.
