2012-03-17 16 views
6

Estoy tratando desesperadamente de obtener algunas caras de fuentes de Google para que funcionen con Raphael (biblioteca de JavaScript de representación SVG/VML) en IE8.Font-face, Raphael e IE8

Al principio probé el código de las fuentes de google.

Mi segundo intento ha sido descargar y convertir las fuentes para alojar mi propio CSS más completo. Ahora las fuentes se muestran en la parte html de la página (dentro de un menú desplegable de bootstrap nav modificado), pero no funcionan en el lienzo VML (generado por Raphael).

Ejemplo aquí:

http://beta.yetiprint.com/fr/etiquettes-autocollantes/4-etiquettes-couleur-ronde.html

¿Es posible conseguir que el trabajo en IE8? ¿Cualquier pista?

+0

intente importar las fuentes 'eot' (Tipo abierto) para ver si funcionan y depurar esto aún más. está documentado en [msdn] (http://msdn.microsoft.com/en-us/library/ms533034 (v = vs.85) .aspx). Estoy tratando de resolver el problema desde hace un tiempo, y hasta ahora es la única pista prometedora. espero resolver esto más tarde .. –

+0

me estoy volviendo pesimista, después de leer [aquí] (http://dojotoolkit.org/reference-guide/dojox/gfx.html#implementation-notes) que IE había dejado de admitir 'fuente -family' en VML después de la versión 7. –

+1

también, revisa [este hilo en las fuentes 'eot' en IE] (http://stackoverflow.com/questions/5472207/ie-8-problem-with-custom-google- fuente) y ver si ayuda. –

Respuesta

3

¿Has probado los procedimientos en Raphael al registerFont()? Ver http://raphaeljs.com/reference.html#Raphael.registerFont. Eso le da el procedimiento para obtener la fuente en Raphael.

Basado en the link in that page, debería poder obtener compatibilidad con VML y por lo tanto la funcionalidad IE8. Al menos teóricamente; Nunca lo hice, acabo de encontrar esta información que parece apuntar en la dirección que desea ir.

5

Puedo confirmar que el método de ScottS funciona, pero no pude ajustar estas instrucciones en el campo de comentarios de su respuesta.

Instrucciones para obtener fuentes personalizadas para trabajar en Raphael utilizando Cufón:

  1. Ir a la Cufón website donde se puede convertir una fuente a las formas de trazado.
  2. Cargue su fuente personalizada, elija un nombre de fuente y haga clic en el ícono de Raphael en "Personalización para scripts de terceros".
  3. Envíe el formulario y descargue el archivo Javascript que aparece.
  4. Incluir este Javascript debajo del Javascript de Raphael incluye.
  5. Register the font con Raphael como este, en nombre de fuente es el nombre de la fuente que especificó en el paso 2: var myfont = paper.getFont('fontname');
  6. Use your font como este en Raphael: paper.print(100, 100, 'Hello World', myfont, 100);

rendimiento no es muy grande en comparación con Paper.text, pero funciona en IE6 y superior.

+0

Lo bueno: funciona como un encanto, y sí, el rendimiento es peor. Otra diferencia es que Paper.text centra el texto alrededor del punto que especifique. Paper.print simplemente lo renderiza desde este punto. – Karol

+1

También creo que se debe aceptar la respuesta, ya que no hay otra manera de hacer que las fuentes personalizadas funcionen con Raphael. – Karol