Préservation du type de police dans le fichier SVG illustrator

24

Salut, je suis nouveau dans l'illustrateur et j'ai créé une image qui utilise la police "Skia-Regular". Mais lorsque j'enregistre cette image au format .svg , cela change le type de police. Et lorsque j'ouvre le fichier au format .svg dans le navigateur, la police est complètement différente. Quelqu'un peut-il me dire ce que je fais de mal? J'ai également ouvert le fichier .svg dans le bloc-notes ++ et il est écrit font-family = "'Skia-Regular' ainsi que la police n'est pas Skia Regular.Toute aide sera appréciée. Merci

L'image est également jointe pour référence Image jointe

adobe-illustrator vector logo svg Rizwan606
la source

Réponses:

31

Si vous voulez être sûr que le texte aura la même apparence dans tous les cas -

Tout d'abord, vous pouvez développer le texte avant de l'enregistrer au format svg

Deuxièmement, dans la partie police de la boîte de dialogue d'enregistrement, vous pouvez appuyer sur "convertir en contour"

Ilan
la source
2
La deuxième partie est claire. Pouvez-vous expliquer la première partie, comment "étendre" le texte?
Rizwan606
5
@ Rizwan606 vous sélectionnez le texte avec un outil de sélection et appuyez sur le menu Objet et là vous appuyez sur Développer (il convertira le texte en formes), alternativement vous sélectionnez le texte, puis RightClick et choisissez Créer des contours
Ilan
5
Pour clarifier cette réponse, vous n'avez pas besoin de faire les deux. L'une ou l'autre méthode fonctionnera indépendamment.
Simon Woodside
⚙️ (Paramètres avancés pour les types de fichiers exportés) → SVG → Police pour «Convertir en contours».
Константин Ван
9

La raison pour laquelle la police ne s'affiche pas correctement dans le type de police réel est que, lorsque le SVG est enregistré à l'aide de l'application Illustrator. L'application convertit automatiquement la conception en code. Et s'il est observé de près, le nom de la police dans le code ne correspond pas à la police réelle installée dans le système.

Pour surmonter le problème du rendu des polices, vous devrez copier le code SVG d'Illustrator et modifier le nom de la police pour qu'elle corresponde au nom de la police installée dans votre système. (Ex: nom de police dans le code SVG provenant d'Illustrator "Arial-Regular", mais le nom de la police installée dans votre système est "Arial Regular". Ici, vous devrez modifier le code pour avoir Font-Family comme "Arial Regular" ".)

Cela résoudra votre problème sans avoir besoin de convertir les polices en contour.

J'espère que cela t'aides!

Sameer
la source
1
C'est exactement ça! Illustrator utilise les noms PostScript pour les polices lorsque vous effectuez un Fichier> Enregistrer et sélectionnez SVG. Vous vous retrouvez avec "MyriadPro-Regular" au lieu de "Myriad Pro" comme vous pouvez vous y attendre et votre navigateur ne fonctionne pas avec les noms PostScript comme le fait Illustrator. Une solution de contournement consiste à utiliser Fichier> Exporter pour enregistrer les fichiers SVG car il exportera le nom de famille approprié au lieu du nom PostScript.
Michael Thompson
@Michael Thompson lorsque je choisis Fichier> Exporter, SVG n'est pas l'une des options. J'utilise CS5. Est-ce une option dans les versions antérieures / ultérieures?
Max Starkenburg
@MaxStarkenburg: le menu Export change énormément d'une version à l'autre. Dans les versions plus récentes, il existe trois façons de sauvegarder / exporter vers SVG: Fichier> Enregistrer sous> (choisissez le type SVG); Fichier> Exporter> Exporter sous ...> (choisissez le type SVG) et Fichier> Exporter pour les écrans> (ajouter le format SVG).
Michael Thompson
4

Comme vous l'avez noté, la police de caractères est une référence à un fichier de police qui peut (ou non) être disponible pour le système qui tente d'ouvrir le svg. La solution consiste à convertir votre type en chemins afin que les courbes soient stockées explicitement dans le fichier.

Quant à savoir pourquoi le navigateur peut ne pas être au courant de la police que vous essayez de référencer, cela n'est pas clair car je suppose que vous testez sur le même ordinateur que vous avez utilisé lors de la création du fichier svg. Il est plausible que la police soit sélectionnable dans Illustrator mais qu'elle ne soit pas officiellement installée au niveau du système d'exploitation.

horatio
la source
Oui, je teste sur le même ordinateur sur lequel je crée le fichier svg. Et pouvez-vous s'il vous plaît me corriger si je me trompe. J'ai pris votre première partie de la réponse car je dois donner un chemin spécifique au fichier de police .ttf de Skia Regular dans la propriété Font-Family?
Rizwan606
Il appartient au navigateur de faire correspondre le nom de la police à une police installée, donc "non" vous ne lui donnerez pas de chemin vers un ttf. La référence est similaire à la syntaxe css font-face, qui permet une liste de styles de famille de polices séparés par des virgules. Le navigateur peut identifier le nom de police différemment.
horatio
Notez que pour les logos et les matières distribuées de cette nature (pdfs, etc.) où la police de caractères est importante, il est judicieux d'incorporer la police ou de la convertir en chemins. La résolution de cette référence n'est donc peut-être pas une bonne solution car vous comptez sur des tiers pour que les polices de caractères appropriées soient déjà installées
horatio
2

archive pour le web:

  1. utilisez des polices google.
  2. en utilisant seulement deux familles de polices max.

Exporter: polices: (texte: svg, subconjunto: aucun). propriétés svg: (élément de style).

dans les styles du fichier résultant, modifiez-le:

  1. attachez la ligne "@import".
  2. attachez "px" à toutes les tailles de police.
  3. renommer le nom de la police.

résultat:

<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
la source
1
Cette réponse est trop laconique. Je ne peux même pas dire s'il fait référence à un fichier SVG ou à une autre solution ...
jiggunjer
1

Il est probable que votre PC ne dispose pas du fichier de police de la famille de polices (Skia-Regular) disponible localement. Ainsi, lorsque vous ouvrez votre fichier SVG sur votre navigateur, il s'affiche en utilisant la police système par défaut qui est la plupart du temps Times New Roman. Il existe plusieurs solutions:

  1. Utilisez @import pour faire référence à l'API Google Fonts (mais le problème est que, selon la façon dont vous intégrez vos images SVG sur votre site Web, cela ne fonctionne bien que si vous utilisez le SVG en ligne et le tag d'objet SVG)
  2. Convertissez vos polices en chemin (ce qui augmente la taille de votre fichier et donne un texte flou lorsque vous perdez le rendu ClearType )
  3. Incorporez des polices dans votre fichier SVG à l' aide de Nano

Vous pouvez en savoir plus sur l'utilisation de polices personnalisées en SVG ici: https://css-tricks.com/using-custom-fonts-with-svg-in-an-image-tag/

tary3um
la source