css3 - importar - implementar fuente en css

Los iconos de fuentes impresionantes no funcionan en algunos navegadores

Question

Estoy usando Bootstrap + Font Awesome, y todo está bien con la mayoría de los navegadores de escritorio y móviles, pero los íconos de Font impresionante no funcionan con algunos navegadores como Opera Mobile, Opera Mini y algunas versiones de Android Browser. Sólo muestra un rectángulo en blanco.

¿Alguien sabe ese problema? y, ¿hay una solución?

Gracias

[EDICIÓN 2013-03-06! Importante] No pude encontrar ningún problema aparente, así que lo intenté con soluciones inauditas. Probé con dos herramientas de conversión de fuentes en línea. Primero utilicé http://www.freefontconverter.com/ para convertir el original FontAwesome svg a ttf. Luego usé http://www.font2web.com/ para convertir ese archivo .ttf a .eot, .woof y .otf.

Resultados: Opera Mobile ahora muestra los iconos correctamente. (No sé cuáles son los cambios, pero funciona)

El problema ahora es Blackberry 6 . Probé @ font-face con las fuentes BB Curve 9300, Modernizr y Google y todo está bien. Pero FontAwesome sigue sin funcionar ...

[EDICIÓN 2013-03-01] Opera mobile 10+ admite @ font-face, por lo que el problema puede ser otro. Probé con otra fuente de servidor con @ font-face y funciona bien, pero con FontAwesome no puedo mostrar los iconos correctamente.

[EDITAR 2013-03-03] El problema no es solo con mi sitio web, los ejemplos y las pruebas del sitio web de Font Awesome no funcionan ...

[EDITAR 2013-03-4] Intenté hacer una copia de seguridad usando la detección de la característica "fuente de letra" de Modernizr, pero Opera Mobile y BlackBerry 6 se vuelven verdaderas porque admiten esa característica. ¿Cómo puedo detectar si la fuente FontAwesome está cargada?

Answer 1

1. Ir a http://icomoon.io/app/

2. Icono de pulsador Biblioteca de iconos

3. Añadir biblioteca Font Awesome

4. Seleccione los iconos que desee

5. Pulsar fuente (exportar iconos a fuente css impresionante)

6. Reemplace las fuentes Awesome (ttf, svg, etc ...) con las nuevas fuentes Awesome

CSS

 @font-face{
font-family:"FontAwesome";
src:url(''../fonts/awesome/fontawesome.eot'');
src:url(''../fonts/awesome/fontawesome.eot?#iefix'') format(''embedded-opentype''),
url(''../fonts/awesome/fontawesome.woff'') format(''woff''),    url(''../fonts/awesome/fontawesome.ttf'') format(''truetype''),
        url(''../fonts/awesome/fontawesome.svg#fontawesomeregular'') format(''svg'');
font-weight:normal;font-style:normal;}.flag:before,.mobile:before{font-family:"FontAwesome";font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;display: inline-block; text-decoration: inherit;}.flag:before{content:"/f024";}.mobile:before{content:"/f10b";}

Intento esto y luego Awesome Fonts funciona en Opera Mobile :)

Answer 2

Como referencia, tuve este problema y el problema fue dominios. En algunos navegadores, Firefox se niega, en particular, a cargar fuentes de otro dominio (llamada la misma política de dominio). Los encabezados

Access-Control-Allow-Origin "*"

En nginx, por ejemplo, esto se configura así:

location ~* /.(eot|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}

Debe configurarse, y también recordar que el tipo de contenido de las fuentes debe ser

application/x-font-ttf                ttf;
font/opentype                         otf;
application/vnd.ms-fontobject         eot;
font/x-woff                           woff;

El tipo de contenido incorrecto puede hacer que la fuente no se cargue, por lo que pierde los iconos. Es bueno tener esta información como referencia :)

Answer 3

Hay un par de problemas diferentes que me gustaría analizar y espero que te ayuden a solucionarlo.

Si mencionas qué fuente funcionó, probablemente podríamos ayudarte mejor. Compararía la fuente que dijo que trabajó con FontAwesome para ver cuáles son las diferencias. Apostaría a que los glifos se asignan a un área de Unicode diferente y tal vez el navegador no lea desde allí.

Podría usar una herramienta como Font Forge para verificar las diferencias con otras fuentes. Noté que cuando intentaba volver a generar la fuente FontAwesome de Font Forge obtuve errores de validación con el espaciado entre caracteres y los glifos tenían errores (auto-intersección, dirección incorrecta, puntos faltantes en los extremos). He visto esto antes en las fuentes de iconos y nunca tuve un problema, pero tampoco he probado en Opera antes. Si compara el intento de generar una fuente con algo que funcione, probablemente podría reducir el problema.

Otras cosas, estoy seguro de que estás cubierto, pero doble verificación:

Leí aquí que tener una versión local de la fuente instalada podría entrar en conflicto con la fuente incrustada. https://github.com/FortAwesome/Font-Awesome/issues/247

Si tomaste el icono de fuente y luego le agregaste tus propios glifos, entonces usaste algo como ardilla de fuente para generar todos los formatos seguros para la web, asegúrate de decirle al generador que agregue el rango Unicode de los glifos que creaste. Una vez que me olvidé de hacer esto y la aplicación solo agregó los glifos en el rango az. Una forma fácil de verificar es mirar la pestaña de los gyphs en la página html de demostración y asegurarse de que todos los íconos estén incluidos.

Está utilizando la regla de fuente tipográfica CSS3 adecuada e incrustando eot, ttf, woff y svg y ha esperado un poco. Noté que en algunos iphones antiguos la fuente tarda una eternidad en mostrarse.

El uso de una herramienta como la detección de la característica de fuente de letra modernizr podría facilitar un poco la asistencia entre navegadores.

Tengo curiosidad por ver cuál es el problema.

Answer 4

Opera Mini no es compatible con la fuente tipográfica, como se menciona en el sitio web oficial http://www.opera.com/docs/specs/productspecs/

Un pequeño truco "sucio" que podría pensar, será convertir su fuente a SVG y usarla en su CSS ya que es parcialmente compatible (ya que también está escrito en su sitio web).

Algo como

.icon{

 background-image: url(icon.svg);
 -o-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
}

Vea también el enlace anterior http://www.w3.org/TR/SVGTiny12/fonts.html

ACTUALIZAR

Opera mini no admite FontAwesome en iOS 6.1

Ninguno de los otros ejemplos de fuentes tipográficas funciona ( http://codepen.io/bennettfeely/full/ErFGv )

Pero usar SVG parece una gran solución, prueba del concepto Fuente original: http://dbushell.com/demos/css-sprites/ Más información sobre la demostración anterior: http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/

Answer 5

Por eso sé que hay soporte para @ font-face en Opera Mini y solo un soporte parcial de @ font-face en Andoroid desde la versión 2.2 a la 3.0 (las versiones anteriores de Android no tenían soporte de @ font-face). Ver: http://caniuse.com/fontface

El respaldo parcial de lo que sé significa que no son compatibles con las fuentes protegidas por DRM y alguna sintaxis como la sintaxis "smiley" no funcionó para ellos.

Por lo tanto, si desea mostrar los íconos en Opera Mini y Android 2.1, deberá retroceder a los íconos de imágenes. Si tiene problemas con Android 2.2-3.0, probablemente pueda solucionarlo cambiando la sintaxis.

Answer 6

SOLUCIÓN PARA OPERA MOBILE (No Opera Mini)

Probé con dos herramientas de conversión de fuentes en línea. Primero utilicé http://www.freefontconverter.com/ para convertir el original FontAwesome svg a ttf. Luego usé http://www.font2web.com/ para convertir ese archivo .ttf a .eot, .woof y .otf.

Finalmente, reemplacé los archivos originales y ahora Opera Mobile muestra los iconos correctamente.

Answer 7

Tal vez esto es relacionado con el juego de caracteres? ¿Está declarando para UTF-8 en su documento así como en su hoja de estilo?

<meta charset="UTF-8">

o

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

y en la hoja de estilo (nota, debe ser primera línea, primera columna):

@charset "utf-8";

Answer 8

Tales errores son reportados para FortAwesome:

1. https://github.com/FortAwesome/Font-Awesome/issues/246
2. https://github.com/FortAwesome/Font-Awesome/issues/791

Aún no se han corregido, se han contactado con las relaciones de desarrollo de Opera para averiguar qué está causando esto. No tienes muchas opciones, excepto esperar a que lo reparen. Seguimiento de los errores para obtener más información.

Answer 9

Yo también tuve problemas para obtener una fuente SVG para mostrar en Blackberry. El problema es el nombre de la svg (en el documento) y el nombre de la familia de fuentes debe ser el mismo. Encontré esta respuesta aquí, en los comentarios a la última respuesta:

@fontface en blackberry os 7

Answer 10

usa la aplicación icomoon http://icomoon.io/app/ para cambiar la fuente svg a fuentes web y reemplaza la fuente antigua de Font Awesome. me funciona en opera mobile