Preservar el tipo de fuente en el archivo SVG de Illustrator

24

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. Imagen adjunta

Rizwan606
fuente

Respuestas:

31

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"

Ilan
fuente
2
La segunda parte es clara. ¿Puede explicar la primera parte, cómo "expando" el texto?
Rizwan606
55
@ Rizwan606 selecciona el texto con una herramienta de selección y presiona el menú Objeto y allí presiona Expandir (convertirá el texto a formas), alternativamente selecciona el texto y luego Haz clic derecho y presiona Crear contornos
Ilan
55
Para aclarar esta respuesta, no necesita hacer ambas cosas. Cualquiera de los métodos funcionará de forma independiente.
Simon Woodside
⚙️ (Configuración avanzada para los tipos de archivos exportados) → → Fuente SVG “convertir en contornos.”
Константин Ван
9

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!

Sameer
fuente
1
Esto es exactamente eso! Illustrator utiliza los nombres PostScript para las fuentes cuando hace un Archivo> Guardar y selecciona SVG. Termina con "MyriadPro-Regular" en lugar de "Myriad Pro" como podría esperar y su navegador no funciona con nombres PostScript como lo hace Illustrator. Una solución alternativa es usar Archivo> Exportar para guardar SVG, ya que exportará el nombre de familia correcto en lugar del nombre PostScript.
Michael Thompson
@Michael Thompson cuando elijo Archivo> Exportar, SVG no es una de las opciones. Estoy usando CS5. ¿Es esta una opción en versiones anteriores / posteriores?
Max Starkenburg
@MaxStarkenburg: el menú Exportar cambia enormemente entre versiones. En las versiones más recientes, hay tres formas de guardar / exportar a SVG: Archivo> Guardar como> (elija el tipo SVG); Archivo> Exportar> Exportar como ...> (elija el tipo SVG) y Archivo> Exportar para pantallas> (agregue formato SVG).
Michael Thompson
4

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.

horacio
fuente
Sí, estoy probando en la misma computadora en la que estoy creando el archivo svg. ¿Y pueden corregirme si me equivoco? Tomé su primera parte de la respuesta ya que tengo que dar una ruta específica al archivo de fuente .ttf de Skia Regular en la propiedad Font-Family.
Rizwan606
Depende del navegador hacer coincidir el nombre del tipo de letra con una fuente instalada, por lo que "no" no le dará una ruta a un ttf. La referencia es similar a la sintaxis css font-face, que permite una lista separada por comas de estilos de familia de fuentes. El navegador puede identificar el nombre de la fuente de manera diferente.
Horacio
Tenga en cuenta que para logotipos y material distribuido de esta naturaleza, (pdf, etc.) donde el tipo de letra es importante, es una buena idea incrustar la fuente o convertirla en rutas. Así que la solución de esta referencia puede no ser una buena solución, ya que se basan en 3 partes para tener los tipos de letra adecuados instalados ya
Horatio
2

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;}

rowilsonH
fuente
1
Esta respuesta es demasiado breve. Ni siquiera puedo decir si se refiere a un archivo SVG o alguna otra solución ...
jiggunjer
1

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/

tary3um
fuente