2011-12-21 12 views
7

Soy nuevo en SVGs, y acabo de hacer mi primer gráfico decente en Illustrator. Lo he incrustado en una página (usando la etiqueta <embed>) con el script Google Web Fonts para la fuente Ubuntu en la etiqueta <head>, pero resulta que la fuente de Ubuntu se muestra correctamente en el texto normal, pero para que este truco funcione en el SVG, el script de Google debe estar incrustado en el SVG. ¿Cómo puede hacerse esto?¿Hay alguna manera de incrustar un script de fuente web de Google en un archivo SVG?

Here's a link al archivo SVG en cuestión.

Respuesta

11

Aquí hay un example de usar un par de webfonts diferentes dentro de un SVG.

La versión actual de la secuencia de comandos proporcionada por las fuentes web de Google no funciona en svg. Sin embargo, sería muy fácil para Google arreglarlo.

Éstos son algunos ejemplos de uso de fuentes web de Google en SVG con los otros métodos mencionados:

+0

¿Por qué sería inútil que Google hiciera que su script de fuente web sea compatible con SVG? – Jules

+2

No tiene ningún sentido, creo que sería muy útil si el script de Google Fonts funcionara tanto para svg como html. No muestra listas de estilos xml como una forma de incluir las fuentes tampoco. –

2

No creo que esto realmente funcione todavía para SVG vinculado, por ejemplo here is the Firefox bug. No funciona si inline the SVG in the HTML y luego crear reglas CSS de esta manera:

svg .text { 
    font-family:"Familiar Pro Bold", 'Helvetica Neue', Arial, Helvetica, sans-serif; 
    font-weight:bold; 
    font-style:normal; 
} 

Por supuesto, esto sólo va a trabajar en HTML5 navegadores capaces. Here's an example.

+0

Eso es genio. ¡Gracias! – Jules

Cuestiones relacionadas