Preservar el tipo de fuente en el archivo SVG de Illustrator

Si quiere estar seguro de que el texto tendrá la misma apariencia en todos los casos -

Primero, puede expandir el texto antes de guardarlo como svg

En segundo lugar, en la parte de la fuente del cuadro de diálogo para guardar, puede presionar "convertir a contorno"

La razón por la que la fuente no se representa correctamente en el tipo de fuente real se debe a que, cuando el SVG se guarda con la aplicación Illustrator. La aplicación convierte automáticamente el diseño en código. Y si se observa de cerca, el nombre de la fuente dentro del código no coincide con la fuente real instalada en el sistema.

Para superar el problema de la representación de fuentes, deberá copiar el código SVG de Illustrator y modificar el nombre de la fuente para que coincida con el nombre de la fuente instalada en su sistema. (Ej.: Nombre de la fuente dentro del código SVG de Illustrator "Arial-Regular", pero el nombre de la fuente instalada en su sistema es "Arial Regular". Aquí deberá modificar el código para que Font-Family sea "Arial Regular". ".)

Esto resolverá su problema sin necesidad de convertir fuentes a contorno.

¡Espero que esto ayude!

Como notó, el tipo de letra es una referencia a un archivo de fuente que puede (o no) estar disponible para el sistema que intenta abrir el svg. La solución es convertir su tipo en rutas para que las curvas se almacenen explícitamente dentro del archivo.

En cuanto a por qué el navegador puede no ser consciente de la fuente a la que intenta hacer referencia, eso no está claro, ya que supongo que está probando en la misma computadora que usó al crear el archivo svg. Es plausible que la fuente se pueda seleccionar en Illustrator pero que no esté instalada formalmente en el nivel del sistema operativo.

archivo para web:

1. utiliza las fuentes de google.
2. usando solo dos familias de fuentes como máximo.

Exportar: fuentes: (texto: svg, subconjunto: ninguno). propiedades svg: (elemento de estilo).

dentro de los estilos del archivo resultante, edítelo:

1. adjunte la línea "@import".
2. adjunte "px" a todos los tamaños de fuente.
3. cambie el nombre de la fuente.

resultado:

<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);
body {}

.st0{fill:#868686;}
.st1{font-family:'Roboto Condensed';}
.st2{font-size:14.414px;}
.st3{letter-spacing:55px;}
.st4{fill:#1D1D1B;}
.st5{font-family:'Roboto Condensed'; font-weight: 700;}
.st6{letter-spacing:51px;}
.st7{letter-spacing:45px;}
.st8{letter-spacing:40px;}

Lo más probable es que su PC no tenga el archivo de fuente de la familia de fuentes (Skia-Regular) disponible localmente. Entonces, cuando abre su archivo SVG en su navegador, se procesa usando la fuente predeterminada del sistema, que es Times New Roman la mayor parte del tiempo. Hay varias soluciones:

1. Use @import para referirse a la API de Google Fonts (pero el problema es que, dependiendo de cómo incruste sus imágenes SVG en su sitio web, esto solo funciona bien si está usando SVG en línea y etiqueta de objeto SVG)
2. Convierta sus fuentes a la ruta (lo que aumenta el tamaño de su archivo y da como resultado un texto borroso ya que perdió la representación ClearType )
3. Incruste fuentes en su archivo SVG usando Nano

Puede leer más sobre el uso de fuentes personalizadas en SVG aquí: https://css-tricks.com/using-custom-fonts-with-svg-in-an-image-tag/

Puede incrustar la fuente utilizada directamente en su archivo SVG. De esta forma, la fuente correcta se representará independientemente de las fuentes que estén instaladas en el sistema del usuario. Las herramientas CLI Nano o svg-body pueden hacer esto. Pero ambas herramientas solo admiten fuentes de Google.

Descargo de responsabilidad: soy el autor de svg-buddy. Espero que esta herramienta de código abierto sea útil para otros.