En Firefox (Windows 7), los iconos y glifos a los que se llama desde paquete Font Awesome no se procesan correctamente. Un ejemplo de esto se puede ver en el sitio web de Khan Academy. Debajo del video, los iconos se muestran como cuadros con códigos hexadecimales. Esto significa que Firefox no lo está descargando.
Cómo aparece en Chrome (Windows 7), Safari (Mac OS X) y Stainless (Mac OS X):
encontré esta pregunta en Stack Overflow que puede explicar por qué sucede esto: el CSS usa comillas simples para encerrar la ubicación src de la fuente. Sin embargo, no tengo ningún acceso de escritura a los servidores de Khan Academy, por lo que no puedo modificar el sitio web real. Quiero saber si esto se puede solucionar en Firefox y cómo. Puedo ejecutar scripts de Greasemonkey si eso ayudara. Ya he intentado descargar manualmente la fuente y agregarla a la carpeta de fuentes de Windows, pero esto no ayuda.
Como referencia, el CSS que configura esta fuente (no procesado correctamente por Firefox) es:
@font-face
{
font-family:'FontAwesome';
src:url('./fontawesome-webfont.eot');
src:url('./fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('./fontawesome-webfont.woff') format('woff'),
url('./fontawesome-webfont.ttf') format('truetype'),
url('./fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight:normal;
font-style:normal
}
[class^="icon-"]:before,
[class*=" icon-"]:before
{
font-family:FontAwesome;
font-weight:normal;
font-style:normal;
display:inline-block;
text-decoration:inherit
}Actualización: descubrí que Firefox muestra correctamente los iconos basados en fuentes en el sitio web del paquete Font Awesome (vinculado anteriormente). Tras la inspección del CSS y la comparación con el CSS de Khan Academy, encuentro que ambos códigos son exactamente iguales, excepto que no hay punto y coma después del último atributo para el CSS de KA (si ignora el hecho de que está comprimido). ¿La falta de punto y coma causa este problema?
./Como expliqué claramente, fue el problema de Firefox con la ruta, lo que obligó a KA a mover los archivos de fuentes a una nueva ubicación que no necesita./, permitiendo que Firefox también lea los archivos de fuentes correctamente. Por lo tanto, se trata de cómo Firefox maneja los archivos. Está usted equivocado.Respuestas:
Khan Academy solucionó el problema descrito en la pregunta cambiando todas las rutas de
./a/fonts/(por ejemplo,./fontawesome-webfont.ttfcambios a/fonts/fontawesome-webfont.ttf). Me parece que Firefox no puede leer archivos del directorio especial de "puntos" (que simplemente se refiere al directorio actual).PD: la falta de punto y coma en el CSS después del último atributo no causa este problema.
Comentarios adicionales:
¡Incorrecto! Las fuentes funcionaron correctamente en otros tres navegadores como ya había mencionado en cuestión hace mucho tiempo, lo que significa que las fuentes estaban en la ubicación correcta.
./Como expliqué claramente, fue el problema de Firefox con la ruta, lo que obligó a KA a mover los archivos de fuentes a una nueva ubicación que no necesita./, permitiendo que Firefox también lea los archivos de fuentes correctamente. Por lo tanto, se trata de cómo Firefox maneja los archivos.fuente
../.Probablemente no el respuesta a la pregunta planteada, pero está lo suficientemente relacionada como para ayudar a las personas que terminan aquí con un problema ligeramente diferente que produce el mismo resultado que se muestra en las capturas de pantalla.
Firefox bloquea el uso de una fuente que está en un (sub) dominio diferente
También lea los comentarios en esas publicaciones, dan buenos consejos.
fuente
Hice los cambios de ruta para ejecutar IE, Firefox y Chrome correctamente, de la siguiente manera: ( URL para ver )
fuente