Conservazione del tipo di carattere nel file SVG di Illustrator

Ciao, sono nuovo illustratore e ho creato un'immagine che utilizza il carattere "Skia-Regular". Ma quando salvo quell'immagine in formato .svg , cambia il tipo di carattere. E quando apro il file in formato .svg nel browser, il carattere è completamente diverso. Qualcuno può dirmi cosa sto facendo di sbagliato. Ho aperto anche il file .svg in notepad ++ e dice font-family = "'Skia-Regular' ma anche il font non è Skia Regular. Qualsiasi aiuto sarà apprezzato. Grazie

L'immagine è anche allegata come riferimento

Se vuoi essere sicuro che il testo avrà lo stesso aspetto in ogni caso -

Innanzitutto, è possibile espandere il testo prima di salvare come svg

In secondo luogo, nella parte dei caratteri della finestra di dialogo di salvataggio è possibile premere "Converti in struttura"

Il motivo per cui il carattere non viene visualizzato correttamente nel tipo di carattere effettivo è perché, quando SVG viene salvato utilizzando l'applicazione Illustrator. L'applicazione converte automaticamente il design in codice. E se osservato da vicino il nome del font all'interno del codice non corrisponde al font effettivo installato nel sistema.

Per superare il problema del rendering dei caratteri dovrai copiare il codice SVG da Illustrator e modificare il nome del carattere in modo che corrisponda al nome del carattere installato nel tuo sistema. (Es .: nome del font nel codice SVG che da Illustrator "Arial-Regular", ma il nome del font installato nel tuo sistema è "Arial Regular". Qui dovrai modificare il codice per avere Font-Family come "Arial Regular ".)

Questo risolverà il tuo problema senza la necessità di convertire i caratteri in contorni.

Spero che sia di aiuto!

Come hai notato, il carattere tipografico è un riferimento a un file di font che può (o non può) essere disponibile per il sistema che tenta di aprire lo svg. La soluzione è convertire il tuo tipo in percorsi in modo che le curve siano memorizzate esplicitamente all'interno del file.

Il motivo per cui il browser potrebbe non essere a conoscenza della faccia del carattere a cui stai tentando di fare riferimento, non è chiaro poiché presumo che stai testando sullo stesso computer che hai usato durante la creazione del file svg. È plausibile che il carattere sia selezionabile in Illustrator ma non sia installato formalmente a livello di sistema operativo.

archivio per il web:

1. usa i caratteri di Google.
2. utilizzando solo due famiglie di caratteri max.

Esporta: caratteri: (testo: svg, subconjunto: nessuno). proprietà svg: (elemento di stile).

all'interno degli stili del file risultante, modificalo:

1. allega la riga "@import".
2. allega "px" a tutte le dimensioni del carattere.
3. rinominare il nome del carattere.

risultato:

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

È probabile che il tuo PC non abbia il file dei caratteri della famiglia di caratteri (Skia-Regular) disponibile localmente. Quindi, quando apri il tuo file SVG sul tuo browser, viene eseguito il rendering utilizzando il carattere di sistema predefinito che è Times New Roman per la maggior parte del tempo. Esistono diverse soluzioni alternative:

1. Usa @import per fare riferimento all'API di Google Fonts (ma il problema è che, a seconda di come incorpori le tue immagini SVG sul tuo sito Web, funziona bene solo se stai utilizzando SVG in linea e tag oggetto SVG)
2. Converti i tuoi caratteri in percorso (che aumenta le dimensioni del file e genera testo sfocato quando perdi il rendering ClearType )
3. Incorporare i caratteri nel file SVG utilizzando Nano

Puoi leggere di più sull'uso di caratteri personalizzati in SVG qui: https://css-tricks.com/using-custom-fonts-with-svg-in-an-image-tag/