Por alguna razón, en mi Firefox 12.0 para Mac OS X, mis caracteres ⟩ (&rang;) son mucho más grandes de lo que deberían ser. En Chrome y Safari, se ven exactamente como yo quiero que sean.Ciertas entidades de caracteres HTML son ENORMES en Firefox solamente

tengo en mi AddDefaultCharset utf-8.htaccess, así como <meta charset="utf-8"> en mis <head> (como el grupo que estoy entregando a estos archivos no se pueden usar mi .htaccess).

Además, de acuerdo con Adobe's Browser Lab, IE 7 y 8 solo muestran un recuadro cuadrado ... ¿hay alguien que pueda obtener estos navegadores para admitir ese personaje? Haría las cosas mucho más fáciles (ya que los colores van a cambiar, por lo que las imágenes son muy inconvenientes y no se desvanece el color con las imágenes).

Demostración: http://cameronspear.com/demos/rang/

Esto es lo que veo en Chrome y esperaba ver:

Chrome

Esto es lo que mi Firefox está mostrando:

Firefox

Este es una captura de pantalla de los laboratorios del navegador de IE8:

IE8

TL; DR: Quiero todas estas capturas de pantalla para parecerse a la primera de ellas usando ⟩ aka &rang; caracteres. El uso de JavaScript incluso sería aceptable.

Gracias.

[edit] Debo especificar que no es tan crucial que tenga el carácter &rang;, ya que puedo cambiar su color con CSS y que se vea igual en múltiples navegadores.

Solución

Sólo quería compartir exactamente lo que hice por el bien de la posteridad.

Gracias a los consejos y recursos de Pointy, creé mi propio SVG con Inkscape usando la plantilla y los métodos descritos en "How to make your own icon webfont". Mapeé un soporte de ángulo grande en X y uno pequeño en x.

Lo único que encontré fue que mi ángulo necesita tocar la línea de base y solo dar un 72% hacia la parte superior de la caja para que quepa "en línea", por lo que el X fue el más alto, y minúscula x era la más en línea.

entonces convertido mi SVG a TTF con http://www.freefontconverter.com/ y se convierte en una Fuente Web con http://www.fontsquirrel.com/fontface/generator

... y eso fue todo.

La demostración (http://cameronspear.com/demos/rang/) aún está activa. Puede ver que se ve coherente en todos los navegadores y la animación de rotación en clic está cerca del punto, etc.

[Actualización] me encontré con un gran recurso llamado IcoMoon que ayuda en la fabricación de fuentes y la organización de las fuentes para la web, y acepta vectores SVG regulares para que pueda hacerlo en Illustrator y no se metan con Inkscape desde IcoMoon se encarga de la asignación de teclado y esas cosas. Solo puede exportar los iconos que utiliza, de modo que solo cargue 3 o 4 íconos si eso es todo lo que necesita y no la fuente completa.

Se ha convertido en un recurso invaluable, y recomiendo a todos los que quieran entrar en Icon Fonts que lo consulten. Puede obtener más información sobre todo el proceso desde CSS-Trick's 113th Screencast.

Fuente

2012-06-04 CWSpear

Me parecen bien en FireFox. En cuanto a IE, es posible que haya muy poco que pueda hacer al respecto, salvo crear su propia fuente de icono (que en realidad no es * que * difícil, además de tener un control total sobre los gráficos). – Pointy

Son cajas cuadradas para mí, incluso en cromo – Esailija

Estoy obteniendo cuadrados en Chrome 21.0.1155.2 dev-m, pero tal vez es un error del canal dev? http://i.imgur.com/NU6qT.png – mayhewr

Hacer una fuente de icono es tan fácil que puedo hacerlo, aunque (para mí) el proceso es un tanto misterioso. Sospecho que hay muchos artistas gráficos reales que son mejores en eso, y seguramente muchos que entienden los detalles técnicos más que yo.

Here es una publicación de blog bastante exhaustiva sobre el tema. (No mny blog.) Lo principal que no describe muy bien es la relación entre el área de "tablero de arte" de Inkscape y el posicionamiento vertical de cada glifo en la fuente. Entra en detalle, pero nunca he sido capaz de resolverlo.

Lo que hice, por lo tanto, es simplemente hacer una mesa de trabajo cuadrada de 1024 píxeles en un lado. Luego configuré una grilla en Inkscape para que el tablero artístico se divida en una cuadrícula de 16x16. Eso hace que (algo) sea fácil diseñar personajes que rindan bien en un tamaño de fuente de 16 píxeles. (Por supuesto, puedes apuntar a un tamaño de fuente diferente, si quieres; 16x16 es bueno para cosas que deben ser bastante pequeñas, sin embargo.) Entonces, solo me aseguro de que cuando coloque los glifos en la página, estén en una 1em por cuadro de 1em (o 16px por 16px; sin embargo, desea hacerlo en su CSS) sin relleno. Yo uso las etiquetas <i>, y les doy display: inline-block. Eso me da mucha flexibilidad, y generalmente funciona genial.

La herramienta de fuente SVG de Inkscape es, para decirlo suavemente, bastante cruda. Es literalmente el resultado del proyecto de verano de alguien. Funciona, pero no mucho más que apenas. Guardar con frecuencia.

Ahora el proceso para generar los archivos de fuentes es un poco loco. Yo uso FontSquirrel. Subo el archivo .svg guardado de Inksccape y luego solicito EOT, WOFF y TTF. Sorprendentemente, funciona.

Si solo necesitas unos pocos glifos, esta es una manera muy agradable de hacerlo, porque tendrás que descargar un pequeño archivo de fuentes y el navegador lo almacenará en la memoria caché. Sin embargo, hay algunos problemas de accesibilidad y la práctica es suficientemente controvertida como para que algunos miembros más fanáticos de la comunidad lo consideren un bárbaro por hacer esto :-)

Fuente

2012-06-04 18:40:47 Pointy

¡Se ve bien! Tendré que intentarlo esta tarde y avisarle. Muchas gracias por este escrito y recursos. – CWSpear

Bueno ... ¡Yo apero por vectorizar cosas, pero esta fue definitivamente la solución! Afortunadamente fue un símbolo tan simple. – CWSpear

¿Eres capaz de usar imágenes? Proporcionarían una apariencia consistente en todos los navegadores. En muchos casos, las imágenes son preferibles a los símbolos de los personajes.

Fuente

2012-06-04 18:18:05 kevin628

Una fuente de icono también puede proporcionar una apariencia uniforme en todos los navegadores. – Pointy

@Pointy ¡Eso también funcionaría! :) – kevin628

Normalmente estoy de acuerdo, solo sé que los colores cambiarán un poco, y no quiero actualizar los íconos todo el tiempo. Soy un programador, quiero estar fuera de Photoshop tanto como sea posible. Hubo un momento en que se desvaneció entre estados de vuelo estacionario, y si volvemos a eso, estaría bien si la flecha también hiciera la transición de colores y no cambiara instantáneamente a blanco/negro, ¿sabes? – CWSpear

Esto es un problema de fuente. Para maximizar las probabilidades de tener un carácter raro (uno que no está presente en la mayoría de las fuentes) renderizado correctamente, especifique una lista máxima de fuentes que lo contengan.

La página ahora tiene solo font-family: Arial,sans-serif conjunto en los span elementos que contienen el soporte. Como Arial no lo contiene, cada navegador usará su propia definición para sans-serif. Si el mapa al cual está mapeado no contiene el corchete, los navegadores inteligentes intentan algo inteligente, como escanear a través de otras fuentes en el sistema, pero esto aún puede resultar en la falta de un glifo para ello.

Hay un problema adicional.Normalmente no importa que utilice referencias de entidad como &rang; en lugar del propio carácter, pero aquí sí. Por HTML 4.01, &rang; significa U + 232A; mediante borradores HTML5, significa U + 27E9. IE obedece HTML 4.01 aquí, mientras que Firefox usa la definición HTML5. Por lo tanto, es mejor usar el carácter que realmente desea, ya sea como tal en la codificación UTF-8 o como una referencia de caracteres 〉.

Si puede verificar, p. font coverage for U+232A y escribe las fuentes en orden de preferencia. Pero debe verificar que todas las fuentes ofrezcan una presentación aceptable. Por ejemplo, si se utiliza Cambria Math, la altura de línea predeterminada será muy grande, por lo que probablemente desee establecer line-height de forma explícita en un valor razonable como 1.3.

Finalmente, y esto quizás debería haberse preguntado primero, ¿de verdad quiere usar el SOPORTE DE ÁNGULO DE PUNTAJE DERECHO o EL SOPORTE DE ÁNGULO MATHEMATICAL RIGHT? Son corchetes, que se utilizarán como pares con corchetes angulares izquierdos, no con símbolos de flechas.

Algo más información: Guide to using special characters in HTML.

Fuente

2012-06-04 19:58:33

Quiero darte accesorios serios para toda la información perspicaz sobre las cosas y las fuentes de las codificaciones de caracteres. Aprendí mucho buscando esta solución, pero no me ayudó a llegar allí, por eso Pointy comprueba la marca de verificación. Gracias por toda su gran información, sin embargo! – CWSpear

Ciertas entidades de caracteres HTML son ENORMES en Firefox solamente

Solución

Respuesta

Cuestiones relacionadas