Cómo incrustar caracteres privados de uso suplementario Unicode en contenido generado por CSS?

Estoy usando una fuente web para iconos. El icono de glifos se asignan a uso complementario privado de Unicode Zona-A & B.Cómo incrustar caracteres privados de uso suplementario Unicode en contenido generado por CSS?

Todo funciona bien si paso caracteres en CSS a través de Datos- * atributos:

<div class="icon" data-icon="&#xF005A;"></div>

Y luego:

.icon::before { 
    font-family: IconFont; 
    content: attr(data-icon) 
}

Pero si trato de incrustar el carácter de escape directamente en CSS ...

.icon::before { 
    font-family: IconFont; 
    content: '\0F005A '; 
}

Aparece como un signo de interrogación de símbolo faltante.

Pero si intento un carácter especial diferente ...

.icon::before { 
    font-family: IconFont; 
    content: '\F8FF '; 
}

funciona bien!

No encuentro nada en la especificación que diga que esto no es posible ... Simplemente no parece funcionar.

¿Alguien tiene alguna idea de esto?

Fuente

2012-03-28 Adam

Estoy teniendo el mismo problema, sin embargo, el problema solo se presenta en los navegadores webkit. Funciona bien en IE y Firefox. No funciona en Chrome, Safari o Mobile Safari. –

No es una solución real, pero me he comprometido asignando algunos caracteres útiles a sus códigos de caracteres "normales". Esto debería estar bien para caracteres como flechas hacia atrás/adelante, marcas de verificación, etc. que ya tienen caracteres Unicode relevantes. Creo que los lectores de pantalla pueden decir los nombres de los personajes, es decir, "Marca de verificación" (no probados), pero puedo vivir con esto. – Adam

Hemos remediado el problema utilizando el rango que comienza en '\ F000'. Al menos hasta que webkit resuelva este problema o descubramos otra solución. Ese rango parece estar bien con los lectores de pantalla pero no he probado fuera del idioma en-US. –

Visita Icomoon para asignar tu fuente de icono a Área de uso privada. Cuando descarga la fuente, keyamoon ha proporcionado html, que tiene dos métodos para mostrar los caracteres especiales.

Método 1 (from CSS-tricks) e incluido en Icomoon descarga:

<i aria-hidden="true" data-icon="&#xe000;"></i> 

...... 

[data-icon]:before { 
    font-family: 'icomoon'; 
    content: attr(data-icon); 
    speak: none; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
}

Método 2 from Icomoon:

<span aria-hidden="true" class="icon-pencil"></span> 

...... 

.icon-pencil, .icon-folder { 
    font-family: 'icomoon'; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
} 
.icon-pencil:before { 
    content: "\e000"; 
} 
.icon-folder:before { 
    content: "\e001"; 
}

Se puede utilizar cualquier etiqueta para el html realmente; Estoy de acuerdo con uno de los comentarios en CSS-tricks que la etiqueta en cursiva puede ser la mejor semánticamente, ya que fue redefinida en html5. Solo me gusta el ícono.

Fuente

2013-04-09 18:06:49

Cómo incrustar caracteres privados de uso suplementario Unicode en contenido generado por CSS?

Respuesta

Cuestiones relacionadas