Preservando o tipo de fonte no arquivo SVG do illustrator

Olá, sou novo no illustrator e criei uma imagem que usa a fonte "Skia-Regular". Mas quando eu salvo essa imagem no formato .svg , ela altera o tipo de fonte. E quando abro o arquivo no formato .svg no navegador, a fonte é completamente diferente. Alguém pode me dizer o que estou fazendo de errado. Também abri o arquivo .svg no bloco de notas ++ e ele diz font-family = "'Skia-Regular', mas ainda assim a fonte não é Skia Regular. Qualquer ajuda será apreciada. Obrigado

A imagem também é anexada para referência

Se você quiser ter certeza de que o texto terá a mesma aparência em todos os casos -

Primeiro, você pode expandir o texto antes de salvar como svg

Segundo, na parte da fonte da caixa de diálogo de salvamento, você pode pressionar "converter em estrutura de tópicos"

O motivo pelo qual a fonte não é renderizada corretamente para o tipo de fonte real é porque, quando o SVG é salvo usando o aplicativo Illustrator. O aplicativo converte automaticamente o design em código. E se observado de perto, o nome da fonte no código não corresponde à fonte real instalada no sistema.

Para superar o problema da renderização da fonte, você precisará copiar o código SVG do Illustrator e modificar o nome da fonte para corresponder ao nome da fonte instalada em seu sistema. (Por exemplo: nome da fonte no código SVG que, no Illustrator "Arial-Regular", mas o nome da fonte instalada no sistema é "Arial Regular". Aqui você precisará modificar o código para que a família de fontes seja "Arial Regular ".)

Isso resolverá seu problema sem precisar converter fontes em estrutura de tópicos.

Espero que isto ajude!

Como você observou, o tipo de letra é uma referência a um arquivo de fonte que pode (ou não) estar disponível para o sistema que tenta abrir o svg. A solução é converter seu tipo em caminhos, para que as curvas sejam armazenadas explicitamente no arquivo.

Quanto ao motivo pelo qual o navegador pode não estar ciente da fonte que você está tentando referenciar, isso não está claro, já que presumo que você esteja testando no mesmo computador que usou ao criar o arquivo svg. É plausível que a fonte seja selecionável no Illustrator, mas não instalada formalmente no nível do SO.

arquivo para web:

1. use fontes do google.
2. usando apenas duas famílias de fontes no máximo.

Exportação: fontes: (texto: svg, subconjunto: nenhum). propriedades svg: (elemento de estilo).

dentro dos estilos do arquivo resultante, edite-o:

1. anexe a linha "@import".
2. anexe "px" a todos os tamanhos de fonte.
3. renomeie o nome da fonte.

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

Provavelmente, seu PC não tem o arquivo de fontes da família de fontes (Skia-Regular) disponível localmente. Portanto, quando você abre o arquivo SVG no navegador, ele é processado usando a fonte padrão do sistema, que é Times New Roman na maioria das vezes. Existem várias soluções alternativas:

1. Use @import para se referir à API de fontes do Google (mas o problema é que, dependendo de como você incorpora suas imagens SVG no seu site, isso só funciona bem se você estiver usando SVG embutido e tag de objeto SVG)
2. Converta suas fontes em caminho (o que aumenta o tamanho do arquivo e resulta em texto embaçado quando você perde a renderização do ClearType )
3. Incorporar fontes ao seu arquivo SVG usando o Nano

Você pode ler mais sobre o uso de fontes personalizadas no SVG aqui: https://css-tricks.com/using-custom-fonts-with-svg-in-an-image-tag/