WebKit CSS content ¿Error Unicode?

En una página, estoy usando una fuente web personalizada (usando @ font-face ) para los íconos. Cada carácter en el conjunto tiene un valor Unicode apropiado.

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 personajes se representan correctamente.

A excepción de Safari (Windows), este problema solo ocurre cuando inserto los caracteres Unicode a través de la propiedad CSS de contenido . Si inserto el personaje directamente en el HTML usando una referencia de personaje , se representa 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'; }   

… todos se muestran en Firefox, Opera e Internet Explorer, pero el segundo (\ 01F4A1) 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)).

Insertar los caracteres utilizando referencias de caracteres HTML unicode …

 /* CSS: */ span.html_font_icon { font-family: "Ghodmode Icons", "Webdings", sans-serif; }  ⌂💡✍ℹ 

… 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 condensado el código original en una página pequeña que reproduce el problema: http://www.ghodmode.com/testing/unicode-insertion/

¿Me encontré con un error inusual de WebKit 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.

Este es un error en WebKit que solo se solucionó recientemente (en abril de 2012).

Parafraseando mi descripción sobre secuencias de escape para identificadores CSS :

En teoría (según la especificación), cualquier carácter se puede escapar en función de su punto de código Unicode (por ejemplo, para 𝌆 , el U + 1D306 “tetragtwig para el centro” símbolo: \1d306 o \01d306 ), pero los navegadores WebKit antiguos no lo hacen apoye esta syntax para los caracteres fuera del BMP .

Debido a los errores del navegador, hay otra forma ( no estándar ) de escapar de estos caracteres, concretamente \d834\df06 unidades de código UTF-16 (por ejemplo, \d834\df06 ), pero esta syntax (con razón) no es compatible con Gecko. ++ y Opera 12 ++.

Dado que actualmente no hay forma de escapar de los símbolos que no son BMP en una forma de navegador cruzado, lo mejor es usar estos caracteres sin guardar.

En su caso, el carácter U + 1F4A1 es un símbolo suplementario (no BMP). Todos los demás símbolos son caracteres BMP, por lo que el error no los afecta.

También he creado una herramienta para ayudarte con los escapes de CSS , y te avisa si ingresas un carácter que no sea BMP: