Preservar el tipo de fuente en el archivo SVG de Illustrator

Hola, soy nuevo en Illustrator y creé una imagen que usa la fuente "Skia-Regular". Pero cuando guardo esa imagen en formato .svg , cambia el tipo de fuente. Y cuando abro el archivo de formato .svg en el navegador, la fuente es completamente diferente. ¿Alguien puede decirme qué estoy haciendo mal? También abrí el archivo .svg en notepad ++ y dice font-family = "'Skia-Regular', pero la fuente no es Skia Regular. Se agradecerá cualquier ayuda. Gracias

La imagen también se adjunta como referencia.

Si desea asegurarse 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 fuente del cuadro de diálogo de guardado, puede presionar "convertir a esquema"

La razón por la cual la fuente no se representa correctamente al tipo de fuente real es porque, cuando el SVG se guarda usando 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 del renderizado 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 fuente dentro del código SVG que de Illustrator "Arial-Regular", pero el nombre de la fuente instalada en su sistema es "Arial Regular". Aquí deberá modificar el código para tener Font-Family como "Arial Regular" ".)

Esto resolverá su problema sin necesidad de convertir las fuentes al 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 archivo svg. La solución es convertir su tipo en rutas para que las curvas se almacenen explícitamente en el archivo.

En cuanto a por qué el navegador puede no ser consciente de la fuente que está intentando hacer referencia, eso no está claro, ya que supongo que está probando en la misma computadora que utilizó al crear el archivo svg. Es posible que la fuente sea seleccionable dentro de Illustrator pero no esté instalada formalmente en el nivel del sistema operativo.

archivo para web:

1. usa las fuentes de google.
2. utilizando solo dos familias de fuentes máx.

Exportar: fuentes: (texto: svg, subconjunto: ninguno). svg de propiedades: (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 fuentes de la familia de fuentes (Skia-Regular) disponible localmente. Entonces, cuando abre su archivo SVG en su navegador, se procesa utilizando la fuente predeterminada del sistema, que es Times New Roman la mayor parte del tiempo. Hay varias soluciones alternativas:

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 SVG de etiqueta de objeto)
2. Convierta sus fuentes a ruta (lo que aumenta el tamaño de su archivo y da como resultado un texto borroso a medida que pierde la representación de 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/